十一、事件

目录

一、获取事件类型

一、事件

一、事件三要素:

二、事件类型

一、鼠标事件

二、浏览器事件

三、键盘事件

四、表单事件

三、事件流

四、事件绑定

一、事件可以绑定在行内

 二、使用on绑定事件弊端:同一个事件只能给一个元素绑定一次。

 三、解决事件覆盖方法

四、让事件在捕获阶段执行

 五、事件解绑

一、含义:事件绑定,就会一直留在内存中。大部分事件都是执行一次就不需要了,但是此时占用内存的事件就造成了内存浪费。因此,事件绑定并执行结束,不需要执行的时候,需要解绑。

二、绑定方式:第一种是标签:on类型=函数     

第二种是事件侦听器

三、解绑方式:第一种是标签:on类型=null       

第二种removeEventListenter(事件类型,绑定函数)

四、注意:通过事件侦听器绑定事件时,使用的函数为匿名函数,这个事件是无法解绑

的。因为同样的匿名函数,每写一次,都是在定义一个新的匿名函数,两个匿名函数会在堆中创建两个空间存储。

 六、事件对象

一、含义:浏览器为事件提供一个对象,用来记录事件的各种具体信息,如:鼠标点击位置,键盘按键信息。

二、获取事件类型//     e.type

 三、获取鼠标按键码//     e.button

四、获取键盘按键码  / /e.keyCode

五、获取键盘按键码  / /e.keyCode

六、阻止事件冒泡

七、阻止默认行为

一、具有默认行为的标签a标签和提交按钮submit

二、阻止方法:

八、获取鼠标坐标点

一、从元素内部开始计算的坐标:offsetX 和 offsetY

二、相对于浏览器的坐标,使用:clientX和clientY。注意不会随着滚动条改变

三、相对于页面的坐标,会随着滚动条的滚动而加大,使用:pageX和pageY

九、事件委托

一、含义:将所有子元素的点击事件委托给父元素

二、委托事件优点


一、获取事件类型

一、事件

一、事件三要素:

  • 事件源+事件名称+事件处理程序
  • 事件源:谁触发这个事件(一般是按钮)
  • 事件名称:触发了什么事件(四类事件)
  • 事件处理程序:事件触发后要执行的代码(函数形式)

二、事件类型

一、鼠标事件

  • click---左键单机     
  • contextmenu---右键单机    
  • dblclick---双击    
  • mousedown---左键按下
  • mouseup---左键抬起    
  • mouseover---鼠标放上     
  • mouseout---鼠标离开   
  • mouseenter---鼠标放上去     
  • mouseleave---鼠标离开     
  • mousemove---鼠标移动事件    
  • mousewheel---鼠标滚动事件     
  • mouseup---左键抬起

二、浏览器事件

  • load---加载
  • scroll---滚动
  • resize---窗口大小改变

三、键盘事件

  • keydown---按下
  • keyup---按起来
  • keypress---按下
  • 注意:键盘事件除了用window可以触发之外,还可以使用document,或者表单元素。必须是可以选中的元素,DIV不行

四、表单事件

  • submit---提交表单
  • focus---获取焦点
  • blur---失去焦点
  • change---改变内容并且失去焦点 
  • input---input的value值改变
  • 注意:input事件在低版本的IE中不兼容,使用on propert change代替。(不用空格)

三、事件流

  1. 含义:事件发生时,有一个触发并执行的过程,也就是事件的传播过程。 
  2. 简单的说:事件流就是事件从发生到执行结束的流程。
  3. 事件流三阶段:捕获阶段,目标阶段,冒泡阶段
  4. 捕获阶段:事件开始由顶层元素触发,然后逐级向下传播,直到目标元素,依次执行绑定事件。
  5. 目标阶段:触发当前事件、
  6. 冒泡阶段:事件由目标元素接收后,逐级向上传播,达到顶层元素,依次执行绑定事件。
  7. 注意:目标元素的事件是在目标阶段执行,其他事件会在冒泡阶段执行。每个事件只会执行一次,也就是说如果在冒泡阶段执行了事件,就不会在捕获阶段执行。

四、事件绑定

一、事件可以绑定在行内

 二、使用on绑定事件弊端:同一个事件只能给一个元素绑定一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

    <body>
<button id="btn">按钮</button>
</body>
<script>
btn.onclick=function(){
    console.log("第一次单击");
}
btn.onclick=function(){
    console.log("第二次单击");
}
btn.onclick=function(){
    console.log("第三次单击");
}
</script>

</html>

 三、解决事件覆盖方法

  • 使用addEventListenter()
  • 语法:obj.addEventListener(参数1,参数2,参数3)
  • 参数1:给元素绑定的事件类型,如:click
  • 参数2:处理事件函数
  • 参数3:是否在冒泡阶段执行:true在捕获阶段执行,false在冒泡阶段执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    </body>
    <script>
    document.getElementById("btn").addEventListener("click",handle,false);
    function handle(){
        console.log("第一次点击");
    }
    document.getElementById("btn").addEventListener("click",handle1,false);
    function handle1(){
        console.log("第二次点击");
    }
    document.getElementById("btn").addEventListener("click",handle2,false);
    function handle2(){
        console.log("第三次点击");
    }
    </script>
</html>

四、让事件在捕获阶段执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #big{
            width: 400px;
            height: 400px;
            background-color:  green;
            text-align: center;
        }
        #middle{
            width: 220px;
            height: 220px;
            background: #d4abef;
            text-align: center;
        }
        #small{
            width: 100px;
            height: 100px;
            background: red;
            text-align: center;
        }
    </style>
    <div id="big">
    大
        <div id="middle">
          中
            <div id="small">
              小
            </div>
        </div>
    </div>
    </body>
    <script>
    document.getElementById("small").addEventListener("click",Click,);
    document.getElementById("middle").addEventListener("click",Click1,);
    document.getElementById("big").addEventListener("click",Click2,);
    function Click(){
        console.log('小');
    }
    function Click1(){
        console.log('中');
    }
    function Click2(){
        console.log('大');
    }
    </script>
</html>

 五、事件解绑

一、含义:事件绑定,就会一直留在内存中。大部分事件都是执行一次就不需要了,但是此时占用内存的事件就造成了内存浪费。因此,事件绑定并执行结束,不需要执行的时候,需要解绑。

二、绑定方式:第一种是标签:on类型=函数     

第二种是事件侦听器

三、解绑方式:第一种是标签:on类型=null       

第二种removeEventListenter(事件类型,绑定函数)

var btn = document.querySelector('button')
btn.onclick = function() {
    console.log('这是按钮的单击事件')

    // 将给btn绑定的事件解绑
    btn.onclick = null
}

btn.addEventListener('click', fn)
function fn() {
	console.log('这是btn的单击事件')
    // 将给btn绑定的事件解绑
    btn.removeEventListener('click', fn)
}

四、注意:通过事件侦听器绑定事件时,使用的函数为匿名函数,这个事件是无法解绑

的。因为同样的匿名函数,每写一次,都是在定义一个新的匿名函数,两个匿名函数会在堆中创建两个空间存储。

 六、事件对象

一、含义:浏览器为事件提供一个对象,用来记录事件的各种具体信息,如:鼠标点击位置,键盘按键信息。

<body>
    <button id="btn">事件对象</button>
</body>
<script>
    btn.onclick = function () {
        console.log(window.event);
    }
</script>
事件对象
事件对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">事件对象</button>
</body>
<script>
    btn.onclick = function (e) {
        console.log(e);
    }
</script>

</html>
事件对象
事件对象

兼容写法

btn.onclick = function(e){
    var ev = e || window.event
    console.log(ev);
}

二、获取事件类型//     e.type

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<button id="btn">
    按钮
</button>
<script>
    btn.onclick=function(e){
        console.log(e.type); // Click
    }
    btn.onmouseover=function(e){
        console.log(e.type); // MouseOver
    }
</script>

</html>

 三、获取鼠标按键码//     e.button

0表示左键,1表示鼠标滚轮,2表示右键

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    </body>
    <script>
    btn.onmousedown = function(e){
        var e = e || window.event;
        var code = e.button;
        if(code == 0){
           console.log("您点击的是左键");
        }else if(code == 1){
            console.log("您点击的滚轮");
        }else if(code == 2){
            console.log("您点击的是右键");
        }else{
            console.log("无");
        }
    }
    </script>
</html>

四、获取键盘按键码  / /e.keyCode

  • 13:回车键
  • 32:空格键
  • 48-57:0-9
  • 97-122:a-z
  • altKey :alt 键和别的键一起按下得到 true,否则得到 false

  • shiftKey :shift 键和别的键一起按下得到 true,否则得到 false

  • ctrlKey :ctrl 键和别的键一起按下得到 true,否则得到 false

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    </body>
    <script>
    document.onkeypress=function(e){
        var ev = e || window.event;
        console.log(ev.keyCode);
    }
    </script>
</html>

五、获取键盘按键码  / /e.keyCode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script>
    document.onkeyup = function (e) {
       var e = e || window.event
       var keycode = e.keyCode
      console.log(keycode);
        if (e.ctrlKey && keycode === 65) {
            console.log('你同时按下了 shift 和 a')
        }
    }
</script>
</html>

六、阻止事件冒泡

在事件对象中,有一个方法用来阻止事件冒泡,这个方法叫做stopPropagation。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        #big{
            width: 400px;
            height: 400px;
            background-color:  green;
            text-align: center;
        }
        #middle{
            width: 220px;
            height: 220px;
            background: #d4abef;
            text-align: center;
        }
        #small{
            width: 100px;
            height: 100px;
            background: red;
            text-align: center;
        }
    </style>
    <div id="big">
    大
        <div id="middle">
          中
            <div id="small">
              小
            </div>
        </div>
    </div>
    </body>
    <script>
    document.getElementById("small").addEventListener("click",Click,);
    document.getElementById("middle").addEventListener("click",Click1,);
    document.getElementById("big").addEventListener("click",Click2,);
    function Click(e){
        console.log('小');
        var ev = e || window.event;
        ev.stopPropagation();
        console.log("小盒子的内容完毕");
        
    }
    function Click1(){
        console.log('中');
        console.log("中盒子的内容完毕");
    }
    function Click2(){
        console.log('大');
        console.log("大盒子的内容完毕");

    }
    </script>
</html>

阻止事件冒泡在IE浏览器中有兼容问题,在低版本IE浏览器中,需要使用另外一种写法:

small.onclick=function(e){
    var ev = e || window.event;
    ev.cancelBubble=true;
    console.log(this.innerText);
    console.log("小盒子的内容完毕");
}

兼容写法

small.onclick=function(e){
    console.log(this.innerText);
    console.log("小盒子的内容完毕");
    var ev = e || window.event;
    if(ev.stopPropagation){
   		ev.stopPropagation
    }else{
        ev.cancelBubble=true;
    }
}

七、阻止默认行为

一、具有默认行为的标签a标签和提交按钮submit

二、阻止方法:

  1. 给链接地址设置为Javascript:;或者javascript:void(0)
  2. 在事件中最后return false
  3. 通过对象阻止,案例代码
function stopDefault(event) {
    var e = event || window.event; 
    if (e.preventDefault){
        e.preventDefault();   // w3c标准浏览器
    }else{
        e.returnValue = false; // IE浏览器
    }
}

八、获取鼠标坐标点

一、从元素内部开始计算的坐标:offsetXoffsetY

二、相对于浏览器的坐标,使用:clientXclientY。注意不会随着滚动条改变

三、相对于页面的坐标,会随着滚动条的滚动而加大,使用:pageXpageY

九、事件委托

一、含义:将所有子元素的点击事件委托给父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<ul>
	<li>是不</li>
	<li>老弟</li>
	<li>来了</li>
</ul>
<button id="btn">添加</button>
</body>
<script>
var oUl = document.getElementsByTagName("ul")[0];
btn.onclick = function(){
	var oNewLi = document.createElement("li");
	oNewLi.innerText = "准备起飞";
	oUl.appendChild(oNewLi)	
}
oUl.onclick = function(e){
	var ev = e || window.event;
	// 获取到单击的目标元素dom对象
	var target = ev.target || ev.srcElement;
	// 判断是否是li标签
	if(target.nodeName == "li"){
		// 完成业务逻辑
		alert(target.innerText);
	}
}
</script>
</html>

二、委托事件优点

  • 提高性能(事件委托中并没有使用循环给每个节点设置事件,只给一个父元素ul绑定事件)
  • 后续动态添加的节点也有事件的处理
  • 注意:事件委托底层就是通过事件冒泡来完成的,先触发父元素的事件,在通过事件对象的target属性找到具体的目标元素,进而在处理目标元素要执行的业务逻辑。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白有点绿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值