js_DOM自定义事件详解

DOM自定义事件
 一.、如何自定义事件

• js中的事件由 Event 这个类创建的，所以我们可以通过这个类的构造方法来自定义事件

1. 具体步骤

let event = new Event(event type[,options]);

 1.event type 表示事件类型，可以是script事件，也可以是自己自定义的事件
 2. options 是一个对象，里面有两个参数
  * bubblel 是一个布尔值，表示的是是否事件冒泡,默认值是fasle
  * cancelable 是一个布尔值，表示的是是否阻止默认事件,默认值是false

 1.为需要自定义事件的元素分配事件

elem.dispatchEvent(event);

 1. elem 表示的是要添加自定义事件的元素
 2. event 表示的是使用 new Event() 创建的实例对象

 2.给自定义的元素添加对应的事件

elem.addEventListener(Event Name,handler[,options]);

 1. Event Name 表示对1是要添加的事件名，是一个字符床表示
 2. handler 表示的是事件法伤要进行的处理的操作，也就是执行的函数
 3. options 可选参数，是一个布尔值，true表示在事件捕获阶段触发,fasle 表示在事件捕获阶段不触发，默认值是 false

 3.自定义事件触发的条件

因为自定义事件不像其他事件一样有个触发的机制，比如说鼠标点击时触发、键盘按下时触发，所以我们需要给自定义事件添加执行条

• 如果在没有指定任何条件的情况下，当页面加载时就会执行
• 如果使用了函数封装了代码，则当函数调用执行时才会触发事件

示例代码如下

<button id='btn'>按钮</button>
<script>
	function customevent(){
		et event = new Event('myevent');
		btn.dispatchEvent(event);
	}
	btn.addEventListener('myevent',function(){
		alert('自定义事件被触发了');
	});
	setTimeout(customevent,2000);
</script>

注意

通过 Event 构造函数来创建自定义事件，通常只用来创建 script 提供的事件，当然也是可以用来创建自定义名字的自定义事件，但是我们通常不会使用这种方法来做

示例代码1

<button id="btn">按钮</button>
<script>
	let event = new Event('click');
	btn.dispatchEvent(event);
	btn.addEventListener('click', function (event) {
        alert('按钮被触发了');
    });
</script>

示例代码2

<button id='elem'>按钮</button>
<script>
	document.addEventListener('click',function(){
		alert('事件冒泡触发了该事件');
	});
	btn.addEventListener('myevent', funtion(){
		alert('自定义事件被触发了');
	});
	function myevent(){
		let event = new Event('click',{
			bubbles:true,
		});
	}
</script>

注意

这里在给 document添加自定义事件时，因该使用和元素一样的添加方式，使用 document.addEventListener() 方法来添加,可能由于事件的名称’ click '可能会造成一些误解，所以这里前往要注意，否则在触发自定义事件时将不会触发 document的事件

实例代码如下

<button id='btn'>按钮</button>
<script>
	document.onclick = function(){
		alert('事件冒泡触发');
	}
	btn.addEventListener('click',function(){
		alert('自定义事件被触发了');
	});
	let event = new Event('click',{
		bubbles:true,
	});
	btn.dispatchEvent(event);
</script>

二、了解一下Event构造函数中第二参数

• 我们在上面说到过Event构造函数的第二个参数是一个对象，这个对象有两个属性，我们来看看能不能自己添加属性上去

示例代码

<button id='btn'>按钮</button>
<script>
	let event = new Event('click',{
		bubbles: false,
		cancelable: false,
		name: 'zhangsan',
		age: 12
	});
	alert(event.name);
</script>

我们发现，结果是 undefined，所以说，我们不能给Event添加新属性，所以在下节中我们将会学到使用elem.customEvent()方法来自定义事件