js中的事件_页面中不存在相应此事件的组件-CSDN博客

本文链接：https://blog.csdn.net/weixin_46370310/article/details/104717202

js中的事件

javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作。

一、事件绑定的方式

1、内联式

这种模式是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的，并没有与 HTML 分离。

<body>
	<button onclick="btnFn()">内联模式</button>
</body>
<script type="text/javascript">
	function btnFn(){
	    console.log("内联模式");
	}
</script>

由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是外联(脚本)模型。

2、外联(脚本)式

DOM0级事件定义需要两部，先找到DOM节点，然后把处理函数赋值给该节点对象的事件属性。如果想解除事件，那么只要把null赋值给事件属性即可。DOM0级事件无法给一个事件添加多个处理函数。

<body>
	<button id="btn">外联模式</div>
</body>
<script type="text/javascript">
	var oBtn = document.getElementById("btn");
	 //元素.on事件名 = 无名函数
	oBtn.onclick = function(){
	    console.log("外联模式");
	}
</script>

3、事件监听式

监听式事件绑定（DOM2级事件绑定）：监听某个行为，当这个行为被触发时，执行对应事件处理函数，监听可以开启多个，各自监听各自的。

基于W3C内核的浏览器：

（1）添加事件监听的语法：元素.addEventListener(参数1, 参数2, 参数3)

参数1：事件类型
参数2：回调函数，表示将来的事件处理函数
参数3：布尔值，true捕获，false冒泡（默认）

（2）删除事件监听式绑定的函数的方法：可以通过事件处理函数的句柄（函数名）删除

基于IE内核的浏览器：

（1）添加事件监听的语法：元素.attachEvent(参数1, 参数2)

参数1：事件类型：需要加on，如：“onclick”
参数2：回调函数，用来作为事件处理函数

（2）删除事件监听的方法：元素.detachEvent(参数1, 参数2)

参数1：要删除的事件类型：需要加on，如：“onclick”
参数2：要删除的事件处理函数的句柄

基于以上两种语法做了以下兼容（浏览器兼容IE8以下），方便以后使用。

	// 添加事件监听
	function addEvent(node,eventType,funcName){
	    if(node.addEventListener){
	        node.addEventListener(eventType,funcName,false);
	    }else{
	        node.attachEvent("on"+eventType,funcName);
	    }
	}
	// 删除事件监听
	function removeEvent(node,eventType,funcName){
	    if(node.removeEventListener){
	       node.removeEventListener(eventType,funcName,false);
	    }else{
	        node.detachEvent("on"+eventType,cb);
	    }
	}

事件监听式使用示例：

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#box{width: 100px;height: 100px;background: red}
	</style>
</head>
<body>
	<div id="box"></div> 
</body>
<script type="text/javascript">
	 var obox = document.getElementById("box");
	// 添加事件监听
	function addEvent(node,eventType,funcName){
	    if(node.addEventListener){
	        node.addEventListener(eventType,funcName,false);
	    }else{
	        node.attachEvent("on"+eventType,funcName);
	    }
	}
	// 删除事件监听
	function removeEvent(node,eventType,funcName){
	    if(node.removeEventListener){
	       node.removeEventListener(eventType,funcName,false);
	    }else{
	        node.detachEvent("on"+eventType,cb);
	    }
	}
	
	//执行添加事件监听函数
	addEvent(obox,"click",fn1);
	function fn1(){
	    console.log(1)
	}
	addEvent(obox,"click",fn2);
	function fn2(){
	    console.log(2)
	}
	//执行删除事件监听函数
	removeEvent(obox,"click",fn1)
	removeEvent(obox,"click",fn2)
</script>

二、事件对象

浏览器规定，事件处理函数的第一个参数，就是事件对象，下面的例子中， obox：事件源；onclick：事件类型； function(){}：事件处理函数；过程是由浏览器策划完成。

<style>
	#box{width: 100px;height: 100px;background: pink;}
</style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var obox = document.getElementById("box");
    obox.onclick = function(eve){
		// 兼容问题借助于||
        var e = eve || window.event;
        console.log(e);
    }
</script>

事件处理函数第一个参数是形参，是浏览器给这个形参传的值。事件结束后，浏览器会回收这个事件对象。没有事件，就没有事件对象。事件对象平时隐藏，需要使用、获取。

1、事件对象的获取：元素节点.on + 事件类型 = 无名函数;

一旦完成事件绑定操作，就会产生一个事件对象（系统根据事件绑定自动生成的）。

如：当点击页面上的box以后，系统会调用这个函数，会自动将事件对象，传入到函数的第一个参数。

2、JavaScript可以处理的事件类型为：鼠标类型、键盘类型和HTML类型

使用的时候记得在前面加on，如onclick，就是on+事件名称

第一种：鼠标事件。

click：单击鼠标按钮时触发；

dblclick：当用户双击主鼠标按钮时触发；

mousedown：当用户按下鼠标还未弹起时触发；

mouseup：当用户释放鼠标按钮时触发；

mouseover：当鼠标移到某个元素上方时触发；

mouseout：当鼠标移出某个元素上方时触发；

mousemove：当鼠标指针在元素上移动时触发；

mouseenter：在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；

mouseleave：鼠标移出；

第二种：键盘事件。

keydown：当用户按下键盘上任意键时触发，如果按住不放，会重复触发；

keyup：当用户释放键盘上的键触发；

keypress：当用户按下键盘上的字符键时触发，如果按住不放，会重复触发；

第三种：HTML事件。

load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发；

unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；

select：当用户选择文本框（input或textarea）中的一个或多个字符触发；

change：当文本框（input或textarea）内容改变且失去焦点后触发；

input：输入； focus：当页面或者元素获得焦点时在window及相关元素上面触发；

blur：当页面或元素失去焦点时在window及相关元素上触发；

submit：当用户点击提交按钮在元素上触发；

reset：当用户点击重置按钮在元素上触发；

resize：当窗口或框架的大小变化时在window或框架上触发；

scroll：当用户滚动带滚动条的元素时触发；

获取鼠标坐标的属性

clientX clientY 原点位置，窗口可视区域左上角为原点

pageX pageY 原点位置，整个页面的左上角（带滚动高度）

screenX screenY 原点位置，整个屏幕的左上角

e.offsetX, e.offsetY 事件发生时，鼠标相对于当前元素的坐标，有兼容，谷歌有，火狐没有
如果offsetX/Y不能用，可以自己计算：e.pageX - obox.offsetLeft === e.offsetX。

跟随鼠标移动的提示框，相关实例如下：

    <style>
        .box{width: 300px;height: 40px;background: #ccc;margin: 20px auto;position: relative;}
        .box *{margin: 0;}
        .box h2{line-height: 40px;}
        .box p{width: 200px;background: #eee;font-size: 14px;position: absolute;left:0;top:0;display: none;z-index: 1;}

        #box{width: 100px;height: 100px;background: red;display: block}
        #box:hover{display: none;}

    </style>
</head>
<body>
    <div class="box">
        <h2>这是一个标题1</h2>
        <p>这是标题1对应的详细文本这是标题1对应的详细文本这是标题1本这是标题1</p>
    </div>
    <div class="box">
        <h2>这是一个标题2</h2>
        <p>这是标题2对应的详细文本题2对应的详细文本题2对应的详细文本</p>
    </div>

    <div id="box"></div>
</body>
<script>
    var ah2 = document.querySelectorAll(".box h2");

    for(var i=0;i<ah2.length;i++){
        ah2[i].onmouseover = function(){
            // console.log(this);   // 表示当前触发事件的元素
            this.nextElementSibling.style.display = "block";
        }
        ah2[i].onmousemove = function(eve){
            var e = eve || window.event;
            // 将h2后面的p的定位位置，设置成鼠标的坐标，稍微往后一点，防止阻挡鼠标放在事件源身上
            this.nextElementSibling.style.left = e.offsetX + 5 + "px";
            this.nextElementSibling.style.top = e.offsetY + 5 + "px";
        }
        ah2[i].onmouseout = function(){
            this.nextElementSibling.style.display = "none";
        }
    }

</script>

效果：提示框会跟随鼠标移动

在这里插入图片描述

三、事件传播 (冒泡和捕获)

文档流：页面中的元素，按照自上而下，从左向右的顺序依次出现

事件流：是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获

1、从内向外：

事件冒泡：当子元素的某个事件被触发时，会依次向上触发所有父元素的相同事件，这种现象叫事件冒泡。现代的浏览器，默认情况下，都是冒泡模型。多层控件，添加了同一事件，触发，会层层递进。

2、从外向内：

事件捕获：当父元素的某个事件被触发时，会依次向下触发所有子元素的相同事件，这种现象叫事件捕获。捕获不能被直接触发，需要通过特定的方法，才能实现。特定的方式，是一种新的事件绑定方式（事件监听）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKgDNmyb-1583570461762)(C:\Users\asus\AppData\Local\Temp\1583553897485.png)]$

3、阻止事件传播（冒泡和捕获）

cancelBubble=true IE写法

stopPropagation() 其他浏览器

对以上做了以下兼容处理，采用函数封装的形式：

//e是用来接收事件对象的
function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }

阻止事件冒泡的例子：点击空白隐藏

    <style>
        #box{width: 200px;height: 40px;background: #ccc}
        ul{width: 200px;background: #eee;display: none;margin: 0;}
    </style>
</head>
<body>
    <div id="box">点击的位置</div>
    <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
    </ul>
</body>
<script src="../public.js"></script>
<script>
    var obox = document.getElementById("box");
    var oul = document.querySelector("ul");

    obox.onclick = function(eve){
        var e = eve || window.event;

        function stopBubble(e){
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
        }
		stopBubble(e);
        oul.style.display = "block";
    }

    document.onclick = function(){
        oul.style.display = "none";
    }

效果：当点击box时显示ul列表，再点击空白列表会消失
在这里插入图片描述

4、阻止右键菜单（系统自带右键菜单）

 document.oncontextmenu = function( ){

	   return false;

}

四、事件委托

事件委托就像自己因为某些原因，将本来应该亲自处理的事情，交给别人处理，实现和自己处理一样的效果

1、事件委托的原理：

利用事件冒泡的原理，配合事件对象中事件源属性，将多个相同元素的相同事件，委托到页面上现存的、共同的父元素身上。优点是节省效率，提升速度，还可以给页面上暂时不存在的元素绑定事件。

2、事件委托—案例实现

可以删除的表格 (这里体现了给页面上暂时不存在的元素绑定事件)，具体代码如下：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="txt1">
    <input type="text" id="txt2">
    <input type="text" id="txt3">
    <input type="button" id="btn" value="添加">
    <table border="1" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
		<!-- 后期通过js添加tr,td -->
        <tbody></tbody>			
    </table>
</body>
<script>
    var otxt1 = document.getElementById("txt1");
    var otxt2 = document.getElementById("txt2");
    var otxt3 = document.getElementById("txt3");
    var obtn = document.getElementById("btn");
    var otbody = document.querySelector("tbody");
	
	// 点击的时候获取输入框的内容,分别放在创建的td中,然后把td放在tr中,最后tr放在tbody中
    obtn.onclick = function(){
        var td1 = document.createElement("td");
        td1.innerHTML = otxt1.value;
        var td2 = document.createElement("td");
        td2.innerHTML = otxt2.value;
        var td3 = document.createElement("td");
        td3.innerHTML = otxt3.value;
        var td4 = document.createElement("td");
        td4.innerHTML = "删除";
        td4.className = "delete";
        var tr = document.createElement("tr");
		//把td放到tr中
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
		//把tr放到tbody中
        otbody.appendChild(tr);
		
		// 在里面是可以直接绑定需要添加删除功能的td,写在外面需要利用事件委托
        // td4.onclick = function(){
        //     tr.remove();
        // }
    }
    // 利用事件委托，给需要添加删除功能的td绑定点击事件
    otbody.onclick = function(eve){
        var e = eve || window.event;
		// 通过事件对象，找到真正触发事件的事件目标（真正的事件源）
        var sjmb = e.target || e.srcElement;
        // 根据当前特定的条件找到要找的元素
        if(sjmb.className == "delete"){
			// 找到tr删除一整行
            sjmb.parentNode.remove();
        }
    }

</script>