您的位置：首页 > Web前端 > JavaScript

JavaScript绑定事件的方法[3种]

2017-08-31 12:09 393 查看
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定"事件处理函数"。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有三种常用的绑定事件的方法：

在DOM元素中直接绑定；

在JavaScript代码中绑定；

绑定事件监听函数。

一. 在DOM元素中直接绑定

一. 在DOM元素中直接绑定这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
onXXX="JavaScript Code"

其中：

onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。

JavaScript Code 为处理事件的JavaScript代码，一般是函数。

例如，单击一个按钮，弹出警告框的代码有如下两种写法。

1. 原生函数

<input  onclick="alert('谢谢支持')"  type="button"  value="点击我，弹出警告框" />


2. 自定义函数

<input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
alert("谢谢支持");
}
</script>


2. this在第一种绑定方式中的用法。this作为形式参数

<input  type='button' onclick='ClickOn(this)'>

function ClickOn(self){

//self 就代指当前点击的标签

}


实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="myClick(this)"/>
<script>
function myClick(ths){
ths.style.backgroundColor="red";
}
</script>
</body>
</html>


效果：



二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。

在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){ // 事件处理代码 }

其中：

elementObject 为DOM对象，即DOM元素。

onXXX 为事件名称。

例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：

<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<input>标签
}
</script>


this在第二种绑定方式中的应用：

<input id='i1' type='button'>

document.getElementById('i1').onclick=function(){

this // 这里的this代指当前点击的标签

}


三. 绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数。

参数说明
elementObjectDOM对象（即DOM元素）。
eventName事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle事件句柄函数，即用来处理事件的函数。
useCaptureBoolean类型，是否使用捕获，一般用false 。true:捕获模型；false：冒泡模型
false, true 的实例效果探索

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#main{
background-color:red;
width:300px;
height:400px;
}
#content{
background-color:pink;
width:150px;
height:200px;
}
</style>
<body>

<div id="main">
<div id="content"></div>
</div>
<script>
var mymain=document.getElementById("main");
var mycontent=document.getElementById("content");
mymain.addEventListener("click",function(){console.log("main")},false);
mycontent.addEventListener("click",function(){console.log("content")},false);

</script>
</body>
</html>


false 效果，从下往上出来，所以是content先出来：



true效果，从上往下出来，所以是main先出来：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#main{
background-color:red;
width:300px;
height:400px;
}
#content{
background-color:pink;
width:150px;
height:200px;
}
</style>
<body>

<div id="main">
<div id="content"></div>
</div>
<script>
var mymain=document.getElementById("main");
var mycontent=document.getElementById("content");
mymain.addEventListener("click",function(){console.log("main")},true);
mycontent.addEventListener("click",function(){console.log("content")},true);

</script>
</body>
</html>


效果图：



参考源：https://i.cnblogs.com/EditPosts.aspx?postid=7449437
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航