HTML DOM中添加事件方法（详解）

最新推荐文章于 2024-05-05 03:05:28 发布

Online布鲁

最新推荐文章于 2024-05-05 03:05:28 发布

阅读量3.6k

点赞数 1

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_59463562/article/details/125283960

版权

HTML DOM

DOM（Document Object Model）是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准。

HTML DOM是HTML的标准对象模型，HTML的标准编程接口，W3C标准。DOM中，每一个元素都是节点：

文档是一个文档节点
所有的HTML元素都是元素节点
所有HTML属性都是属性节点
文本插入到HTML元素是文本节点
注释是注释节点

Document对象

Document对象是HTML文档的根节点。

Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。

Document对象是Window对象的一部分，可通过window.document属性对其进行访问。

HTML DOM事件

HTML DOM 允许JavaScript对HTML事件作出反应。只用眼看是不能深刻理解这些内容的，实践起来更容易上手写代码。

HTML事件的例子：

当用户点击鼠标时

当鼠标移动到元素上时

用户点击鼠标事件
e.g.:
<html>
    <head>
        <meta charset="utf-8">
        <title>用户点击鼠标</title>
    </head>
    <body>
        <p onclick="this.innerHTML='PLEASE CLICK IT'">
            点击文本
        </p>
    </body>
</html>

鼠标移动到元素事件
e.g.:
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
	obj.innerHTML="Thank You"
}

function mOut(obj)
{
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

addEventListener()方法

1.document.addEventListener()方法用于向文档添加事件句柄。

语法：document.addEventListener( event, function, useCapture)

参数值：event：此参数必需。描述事件名称的字符串。

function：必需。描述事件触发后执行的函数。当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。

useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

true-事件句柄在捕获阶段执行

false-默认值，事件句柄在冒泡阶段执行

<body>
    <p>
       使用addEventListener() 方法向文档添加许多事件。
    </p>
   	<p id="demo">
        
    </p>
    <script>
    	document.addEventListener("mouseover",myFunction);
    	document.addEventListener("click",mySecondFunction);
        document.addEventListener("mouseout",myThirdFunction);
        function myFunction() {
            document.getElementById("demo").innerHTML += "Moused over<br>"
        }
        function mySecondFunction() {
            document.getElementById("demo").innerHTML += "Clicked<br>"
        }
        function myThirdFunction() {
            document.getElementById("demo").innerHTML += "Moused out<br>"
        }
    </script>
</body>

2.element.addEventListener()方法为指定元素添加事件句柄。

语法：element.addEventListener( event, function, useCapture)

参数值：event：必需。字符串，指定事件名。

function：必需。指定要事件触发时执行的函数。

useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

<body>
    <p>
        指定元素添加事件，点击按钮进行计算
    </p>
    <button id="myBtn">
        点击此处
    </button>
    <p id="demo">
        
    </p>
    <script>
    var a = 3;
    var b = 5;
    document.getElementById("myBtn").addEventListener("click",function(){ myFunction1(a,b);});
        function myFunction1(m,n){
            var sum = m*n;
            document.getElementById("demo").innerHTML = sum;
        }
        
        
    </script>  
</body>