zoukankan html css js c++ java

Javascript事件

1、事件

在什么时候执行什么事

2、事件的三要素

事件源：触发事件的元素
事件类型：事件的触发方式
事件处理程序：事件触发后要执行的代码

例如：

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点，表示文本框等获得鼠标光标。
onblur	失去焦点，表示文本框等失去鼠标光标。
onmouseover	鼠标悬停，即鼠标停留在图片等的上方
onmouseout	鼠标移出，即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时

鼠标单击事件：

点击我

<p onclick="this.innerHTML = '你点击成功了'">点击我</p>

鼠标双击事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <h5 ondblclick="changetext(this)">请点击该文本</h1>
    <script>
      function changetext(id) {
        id.innerHTML = "我爱学习!";
      }
    </script>
  </body>
</html>

鼠标移除悬停

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div
      onmouseover="mOver(this)"
      onmouseout="mOut(this)"
      style="background-color:deepskyblue;200px;height:100px;"
    >
      把鼠标移到上面
    </div>
    <script>
      function mOver(obj) {
        obj.innerHTML = "你把鼠标移到了上面 ";
      }

      function mOut(obj) {
        obj.innerHTML = "你把鼠标移开了";
      }
    </script>
  </body>
</html>

3、导航样式切换：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      #list li {
        list-style-type: none;
         100px;
        height: 50px;
        line-height: 50px;
        background-color: beige;
        text-align: center;
        float: left;
      }

      #list li.current {
        background-color: red;
      }

      #list li a {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <div id="menu">
      <ul id="list">
        <li class="current">
          <a href="javascript:void(0)">首页</a>
        </li>
        <li>
          <a href="javascript:void(0)">HTML</a>
        </li>
        <li>
          <a href="javascript:void(0)">CSS</a>
        </li>
        <li>
          <a href="javascript:void(0)">JavaScript</a>
        </li>
        <li>
          <a href="javascript:void(0)">关于</a>
        </li>
        <li>
          <a href="javascript:void(0)">帮助</a>
        </li>
      </ul>
    </div>

    <script>
      // 获取所有的 li 标签
      var liObjs = document.getElementById("list").getElementsByTagName("li");
      // 循环遍历，找到每个 li 中的 a，注册点击事件
      for (var i = 0; i < liObjs.length; i++) {
        // 每个 li 中的 a
        var aObj = liObjs[i].firstElementChild;

        aObj.onclick = function() {
          // 把这个 a 所在的 li 的所有的兄弟元素的类样式全部移除
          for (var j = 0; j < liObjs.length; j++) {
            liObjs[j].removeAttribute("class");
          }
          //当前点击的 a 的父级元素 li(点击的这个 a 所在的父级元素 li)，设置背景颜色
          this.parentNode.className = "current";
        };
      }
    </script>
  </body>
</html>

事件的绑定

传统的事件绑定法1

<button onclick="show(1)">我是第一个button</button>
<button onclick="show(2)">我是第二个button</button>
<script>
    function show(num){
    console.log('我是传统的事件绑定'+num);
}
</script>

传统的事件绑定法2

<div id="item">我是div1</div>
<script>
    let item1 = document.getElementById('item');
//	let item1 = document.querySelector('#item');
item1.onclick = function(){
    console.log('我是传统的事件绑定');
}
</script>

调用事件

item1.onclick = function(){ //放在匿名函数中
	show(); //undefined
}

优点：兼容性强

缺点：不能绑定多个同类型的事件

4、事件监听(现代事件绑定)

添加事件监听

addEventListener(事件类型，事件处理程序，布尔值)

<button id="btn">我是一个按钮</button>
		<script>
			let btn = document.getElementById('btn');
			btn.addEventListener('click',function(){
				console.log('我是现代事件绑定');
			})
		</script>

用户点击按钮时触发监听事件：

window.addEventListener('load',init,false);
function init(){
    alert("页面加载成功");
}
//或者
window.addEventListener('load',function(){
    alert("页面加载成功");
},false);

调用事件

function fn1(){
			console.log('hello');
		}
		btn.addEventListener('click',fn1)  //hello

如果带有参数，则要使用匿名参数的形式调用事件

function fn1(num){
			console.log('hello'+num);
		}
		btn.addEventListener('click',function(){  
			fn1(1);
		})

优点：可以绑定多个事件，

缺点：兼容性不好

element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。

true - 事件句柄在捕获阶段执行

false（默认）- 事件句柄在冒泡阶段执行，当值为true时，事件使用捕获传递

addEventListener() 可以给同一个元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则。

addEventListener() 在绑定事件的时候，事件名称之前不需带 on

移除事件监听

removeEventListener()

移除之前绑定过的事件

// 向 <div> 元素添加事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

事件流

事件的执行顺序/传播顺序

事件冒泡/事件捕获

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：p元素的点击事件先触发，然后会触发div元素的点击事件

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：div元素的点击事件先触发，然后再触发p元素的点击事件。

DOM事件流：既支持事件冒泡（默认）也支持事件捕获

事件对象（Event）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				 200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			let box = document.getElementById('box');
			事件处理的第一形参就是event事件对象
            //第一种方式
			box.onclick = function(e){   //e的全称为event
				console.log(e); //MouseEvent
			}
			//第二种方式
			box.onclick = function(){   
				let event = window.event  || arguments[0] 
				console.log(event); 
			}
		</script>
	</body>
</html>

MouseEvent 鼠标对象事件

//鼠标左键  MouseEvent
box.onclick = function(){
	let event = window.event  || arguments[0] 
	console.log(event);
    console.log(event.clientX); //客户端的x坐标
    console.log(event.screenX);  //屏幕的x坐标
    console.log(event.offsetX);  //鼠标单击的位置距离元素左边
    console.log(event.target);  //目标元素 IE的srcElement
    console.log(event.srcElement); 
    console.log(event.type); //事件类别
    console.log(event.timeStamp); //鼠标单击距离页面打开的时间 毫秒
}

//鼠标右键  MouseEvent
			box.oncontextmenu = function(){
				let event = window.event  || arguments[0]
				console.log(event);			
			}
//鼠标滚动 onmousewheel
			box.onmousewheel = function(){
				let event = window.event  || arguments[0]
				console.log(event);
			}

鼠标拖拽时阻止其默认行为

<a href="test.html" onclick="showFn()">拖拽页面</a>
//阻止跳转
			function showFn(){
				alert('我是事件');
				var ev  =window.event || arguments[0];
				if(true){
					ev.preventDefault(); //阻止默认行为,DOM浏览器
                    ev.returnValue= false; //DOM 、 IE
				}
			}

鼠标拖拽时阻止事件冒泡行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				 200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>我是div
			<button>我是btn</button>
		</div>
		<script>
			let body = document.querySelector('body')
			let div = document.querySelector('div')
			let btn = document.querySelector('button')
		
			body.addEventListener('click',function(){
				alert('body触发了');
			},false)
			
			div.addEventListener('click',function(){
				let ev = window.event || arguments[0]
				alert('div触发了');
				ev.stopPropagation(); //阻止了事件冒泡 DOM
			},false)
			
			btn.addEventListener('click',function(){
				let ev = window.event || arguments[0]
				alert('button触发了');
				//ev.stopPropagation(); //阻止了事件冒泡 DOM
				ev.cancelBubble = true; //默认为false  IE 、 DOM
			},false)
			
		</script>
	</body>
</html>

键盘事件

	onkeydown	(物理编码)	onkeypress	(字符编码)	onkeyup
	keyCode	charCode	keyCode	charCode	keyCode	charCode
a	65	0	97	97
A	65	0	65	65
z	90	0	122	122
空格	32	0	32	32
上	37	0	功能键	不会触发
下	40	0	功能键	不会触发
8	48	0	48	48
9	57	0	57	57

小例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				 100px;
				height: 100px;
				background-color: darkkhaki;
				position: fixed;
				left: calc(50% - 50px);
				top: calc(50% - 50px);
			}
		</style>
	</head>
	<body>
		<div class="box" style="left: 600px; top: 400px;">
			
		</div>
		<script>
			let box = document.querySelector('.box')
			document.onkeydown = function(){
				let ev = window.event || arguments[0]
				if(ev.keyCode == 37){
					console.log('我在左移');
					box.style.left = parseInt(box.style.left) -10 +'px'
				} else if(ev.keyCode == 38){
					console.log('我在上移');
					box.style.top = parseInt(box.style.top) -10 +'px'
				}else if(ev.keyCode == 39){
					console.log('我在右移');
					box.style.left = parseInt(box.style.left) +10 +'px'
				}else if(ev.keyCode == 40){
					console.log('我在下移');
					box.style.top = parseInt(box.style.top) +10 +'px'
				}
				}
		</script>
	</body>
</html>

查看全文

相关阅读:
c#中的对象生命周期
 数据抓取的艺术（三）：抓取Google数据之心得
 redmine3.3.0安装问题
 wget 无法建立ssl连接 [ERROR: certificate common name ?..ssl.fastly.net?.doesn?. match requested host name ?.ache.ruby-lang.org?. To connect to cache.ruby-lang.org insecurely, use ?.-no-check-certificate?]
Centos安装ruby
Redmine插件的安装与卸载，知识库插件安装。
Nexus网页直接上传jar包
 mvn deploy命令上传包
 一辈子只有1次成为BAT的机会，你如何把握？
redmine创建新闻，自动发邮件给项目组所有成员

原文地址：https://www.cnblogs.com/qimuz/p/12690432.html