javascript-事件高级_代替 .attachevent 方法-CSDN博客

本文链接：https://blog.csdn.net/weixin_43412366/article/details/104946819

1.注册事件（绑定事件）

给元素添加事件，称为注册事件或绑定事件
注册事件有两种方式：传统方式和方法监听注册方式
1.传统注册方式
利用on开头的事件onclick,onblur…
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
2.方法监听事件
W3c标准推荐方式
addEventListence(）
IE9之前的IE不支持此方法，可使用attachEvent()代替
特点：同一个元素同一个事件可以注册多次
按注册顺序依次执行
addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
将指定的监听器注册到eventTarget(目标对象)上；当该对象参数触发指定的事件，就会执行事件处理函数。
type:事件类型字符串，比如click,mouseover,注意这里不要带on
**listener:**事件处理函数，事件发生时，会调用该监听函数
useCapture:可选一个参数，是一个布尔值，默认时false
**(1)addEventListener() IE9以上 **

<body>
    <button>按钮</button>
    <script>
    var but = document.querySelector('button');
    but.addEventListener('click',function(){
        alert('123');
        })
    </script>
</body>

注意：addEventListener里面的事件类型是字符串，要加引号，并且不带on
(2)attachEvent() IE9以前不建议使用

<body>
    <button>按钮</button>
    <script>
    var but = document.querySelector('button');
    but.attachEvent('onclick',function(){
        alert('123');
        })
    </script>
</body>

2.删除事件（解绑事件）

1.传统注册方式
eventTarget.onclick = null;
2.方法监听注册方式
（1）eventTarget.removeEventListener(type,listener[,useCapture])

<body>
    <button>按钮</button>
    <script>
    var but = document.querySelector('button');
    but.addEventListener('click',fn);//这里的fn不需要调用加小括号
    function fn(){
        alert('123');
        but.removeEventListener('click',fn);
   }
    </script>
</body>

(2)eventTarget.datachEvent();

<body>
    <button>按钮</button>
    <script>
    var but = document.querySelector('button');
    but.attachEvent('onclick',fu);
    function fu(){
        alert('123');
        but.datachEvent('onclick',);
        }
    </script>
</body>

3.DOM事件流

事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程叫DOM事件流
DOM事件流分3个阶段
1.捕获阶段从上往下依次捕获
2.当前目标阶段
3.冒泡阶段从下往上
注意：
1.JS代码只能执行捕获或者冒泡其中一个阶段
2.onclick和attchEvent(ie9以前版本)只能得到冒泡阶段
3.addEventListener(type,listener[,useCapture])第三个参数如果时true,表示在事件捕获阶段调用事件处理程序；如果是false,表示在事件冒泡阶段调用事件处理程序
4.实际开发中我们很少用事件捕获，我们更关注事件冒泡
5.有些事件是没有冒泡的，比如onblur,onfocus,onmouseenter,onmouseleave
6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件

4.事件对象

<body>
	<div>123</div>
	<script>
		var div = document.querySelector('div');
		div.onclick = function(e){
			//e = e||window.event//解决兼容性问题
			console.log(e);
		}
//1.event就是一个事件对象，写在监听函数的小括号里 当形参看
//2.事件对象只有有了事件才会存在，系统自动创建，不需要传递参数
//3.事件对象是事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击就包含了鼠标的相关信息，鼠标坐标
//事件对象可以自己命名比如event,evt,e
//事件对象有兼容性问题，ie678通过window.event兼容性写法 e= e||window.event
	</script>
</body>

1.常见的事件对象属性和方法
1.

<div>123</div>
<script>
	var div = document.querySelector('div');
	div.addEventListener(e){
		console.log(e.target);//返回触发事件的对象（元素）
		console.log(this);//this返回绑定事件的对象（元素）
	}
</script>

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8
e.type	返回事件的类型比如click mouseover 不带on
e.returnValue	该属性阻止默认行为非标准ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件标准比如不让链接跳转
e.stopPropagation（）	阻止冒泡标准

阻止事件冒泡（面试可能会问）

1.标准：利用事件对象里面的stopPropagation()方法
e.stopPropagation()
2.非标准：IE6-8利用事件对象cancelBubble属性
e.cancelBubble = true

事件委托

事件委托也称事件代理，在jQuery里面称为事件委派
事件委托的原理（面试可能会问）
不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

7.常用的鼠标事件

1.常见的鼠标事件
（1）禁止鼠标右键菜单contextmenu

<body
不愿分享的文字
	<script>
		document.addEventListener('contextmenu',function(e){
			e.preventDefault();
		})
	</script>
</body>

（2）禁止鼠标选中（selectstart 开始选中）

<body
不愿分享的文字
 <script>
  document.addEventListener('selectstart',function(e){
   e.preventDefault();
  })
 </script>
</body>

2.鼠标事件对象

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

8.常用的键盘事件

键盘事件	触发条件
onkeyup	某个键盘键被松开时触发
onkeydown	某个键盘被按下时触发
onkeypress	某个键盘被按下是触发但是它不识别功能键比如ctrl shift等

三个事件执行顺序：keydown-keypress-keyup
2.键盘事件对象