网页设计实战之JavaScript(9) -- 事件

最新推荐文章于 2022-03-14 23:28:05 发布

我是包不同

最新推荐文章于 2022-03-14 23:28:05 发布

阅读量571

点赞数

分类专栏：网站设计 JavaScript 文章标签：程序人生

本文链接：https://blog.csdn.net/x879014419/article/details/106634956

版权

网站设计同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

1、事件的概念：

JavaScript可以让用户与页面交互，创建动态页面，网页中的每一个元素都可以产生触发某些事件，让系统调用用户定义JavaScript函数。事件就是可以被JavaScript侦测到的一种行为或动作。

2、事件流：

事件流是事件产生时，系统在分析处理事件时调用哪一级元素的响应函数的流程。

事件流分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。

在这里插入图片描述

3、使用返回值改变HTML元素的默认行为：

HTML元素都有其自己的默认行为，例如：超链接、提交按钮等。通过在绑定事件中加上"return false"来阻止它的默认行为。

4、事件监听方法：

（1）、绑定HTML元素属性a：

<scrpit>
fucntion check(el)
{
	alert("click me");
}
</script>
<div id="aa" value="clickMe" onclick="check(this)">test click</div>

特点：
在HTML中指定事件处理程序时，存在一定的时差，用户可能在页面一出现就触发相应的事件，但是事件处理程序尚不具备执行的条件，容易出错。

事件处理程序的作用域链在不同的浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异，很可能在访问非限定对象时出错。
　　
HTML与JavaScript代码的紧密耦合。如果要更换事件处理程序就需要改动两个地方：JavaScript和HTML。

（2）、绑定HTML元素属性b：

把处理事件函数，写HMTL里面。

<div id="test" onclick = "this.innerHTML+= 'test';"></div>

特点：
只能写一些简单的处理。

（3）DOM0级事件处理程序(绑定DOM对象属性)：

绑定：
document.getElementById(“xxx”).οnclick=事件函数;
解绑定:
document.getElementById(“xxx”).οnclick=null;

<script>
var btn = document.getElementById('button1');
btn.onclick = function () {
    alert('Clicked');
}
</script>
<button id="button1" value="test" > </button>

特点：

DOM0级事件解决了html和js代码强耦合的问题。可以动态绑定事件。

（4）DOM2级事件处理程序：

DOM2级事件处理程序定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener和removeEventListener。所有DOM节点都包含这两个方法，并且他们接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值如果为true，表示在捕获阶段执行事件处理程序，如果为false，表示在冒泡阶段调用事件处理程序。

<div id="aa"  style="width: 100px;">2222</div>
<script>
	var onclick=function(e){
		alert('click');
	}
	var a=document.getElementById("button1");
	// 绑定
	 a.addEventListener("click",onclick,false);
	// 解绑定
	 a.removeEventListener("click",onclick,false); 
</script>
<button id="button1" value="test" > </button>

（5）IE8中的DOM2级事件处理程序：

<div id="aa"  style="width: 100px;">2222</div>
<script>
	var onclick=function(e){
		alert('click');
	}
	var a=document.getElementById("button1");
	// 绑定
	 a.attachEvent("onclick",onclick);
	// 解绑定
	 a.detachEvent("click",onclick); 
</script>
<button id="button1" value="test" > </button>

5、标准事件流：

(1) 、冒泡事件（从内至外）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>标准事件流(冒泡事件)</title>
        <script type="text/javascript">
            function show(sText){
                var oDiv=document.getElementById("display");
                oDiv.innerHTML+=sText;
            }
        </script>
    </head>
    <body onclick="show('body<br>')">
        <div onclick="show('div<br>')">
            <p onclick="show('p<br>')">click me</p>
        </div>
        <div id="display"></div>
    </body>
</html>

点击后的运行结果：
p
div
body

(2)、冒泡事件和捕获事件的比较

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>标准事件流(捕获事件和冒泡事件)</title>
        <!--IE不支持-->
        <script type="text/javascript">
            function show(sText){
                var oDiv=document.getElementById("display");
                oDiv.innerHTML+=sText;
            }

            window.onload=function(){//捕获事件，即由外到内
                var myBody=document.getElementById("myBody");
                var myDiv=document.getElementById("myDiv");
                var myP=document.getElementById("myP");
                myBody.addEventListener("click", function(){show('body<br>');}, true);//若为false则是冒泡事件
                myDiv.addEventListener("click", function(){show('div<br>');}, true);
                myP.addEventListener("click", function(){show('p<br>');}, true);
            }
        </script>
    </head>
    <body id="myBody">
        <div id="myDiv">
            <p id="myP">click me</p>
        </div>
        <div id="display"></div>
    </body>
</html>

修改addEventListener函数的第三个参数，true 和false，可以看到冒泡事件和捕获事件的区别。

6、在事件函数中访问事件对象：

事件对象封装了事件发生的详细信息，尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。
IE中的事件对象是一个隐式可用的全局对象：event，它是window对象的一个属性。
　　//IE中得到事件对象
　　op.οnclick=function(){
　　var oEvent=window.event;
　　}
　　
在标准DOM浏览器检测发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入。
　　//标准DOM中得到事件对象
　　op.οnclick=function(oEvent){
　　//作为参数传进来
　　}

7、常用的事件：

事件	描述
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面