专业编程基础技术教程

网站首页 > 基础教程 正文

JavaScript 事件流与事件监听 javascript

ccvgpt 2024-10-12 13:58:43 基础教程 7 ℃

事件流:

事件冒泡

JavaScript 事件流与事件监听 javascript

取消冒泡：oEvent.cancelBubble=true

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:400px; height:300px; background:#CCC; display:none;}
</style>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');

    oBtn.onclick=function (ev)
    {
    var oEvent=ev||event;

    oDiv.style.display='block';
    //alert('按钮被点击了');

    oEvent.cancelBubble=true; //取消事件冒泡,是解决许多问题的方法和手段
    };

    document.onclick=function ()
    {
    oDiv.style.display='none';
    //alert('document被点击了');
    };
};
</script>
</head>
<body>
<input id="btn1" type="button" value="显示" />
<div id="div1">
</div>
</body>
</html>

冒泡型事件：

<html>
<head>
<title>冒泡型事件</title>
<script language="javascript">
function add(sText){
var oDiv = document.getElementById("display");
oDiv.innerHTML += sText; //输出点击顺序
}
</script>
</head>
<body onclick="add('body<br>');">
<div onclick="add('div<br>');">
<p onclick="add('p<br>');">Click Me</p>
</div>
<div id="display"></div>
</body>
</html>

执行顺序:p对象 -> div对象 -> body对象

冒泡型事件执行顺序::由内到外(p -> div -> body -> document)

注意: DOM 0级只有冒泡, 没有捕获

捕获型事件

相对于IE使用冒泡型事件, Netscape使用了另一种称为捕获型事件(eventcapturing)的解决方案;

addEventListener(事件名称,函数, bCapture)

removeEventListener(事件名称, 函数, bCapture)

事件监听函数第三个参数bCapture确定是冒泡型还是捕获型事件(true:捕获 false:冒泡,默认值false)

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv2">
<p id="myP2">点击该段落， 我是捕获</p>
</div>
<script>
document.getElementById("myP2").addEventListener("click", function() {
alert("你点击了 P 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你点击了 DIV 元素!");
}, true);
</script>
</body>
</html>

执行顺序: div对象 -> p对象

捕获型事件执行顺序:由外到内(如:document -> body -> div -> p)

冒泡型：事件从内部往外部依次执行。

捕捉型：事件从外部往内部依次执行。

事件监听

通用监听方法：

1.直接在HTML标签中分配事件处理函数：

<script language="javascript">
function add(sText){
var oDiv = document.getElementById("display");
oDiv.innerHTML += sText; //输出点击顺序
}
</script>
</head>
<body onclick="add('body<br>');">
<div onclick="add('div<br>');">
<p onclick="add('p<br>');">Click Me</p>
</div>
<div id="display"></div>
</body>

2.结构与行为的分离：

<html>
<head>
<title>监听函数</title>
<script language="javascript">
window.onload = function(){
var oP = document.getElementById("myP"); //找到对象
oP.onclick = function(){ //设置事件监听函数
alert('我被点击了');
}
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

事件监听的作用:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
alert('a');
};
window.onload=function ()
{
alert('b');
};
</script>
</head>
<body>
</body>
</html>

以上程序只弹出alert('b');

理解:对同一对象执行两次事件(同一事件类型)处理函数时,往往只能只执行后一个

因此如果要让脚本在本浏览器中正常运行的话，就必须使用浏览器所支持的事件监听器

IE中的监听方法：

attachEvent(事件名称, 函数), 绑定事件处理函数 attach: 贴上, 附着

detachEvent(事件名称, 函数), 解除绑定 detach: 分离, 拆开

注意：IE只支持冒泡型事件监听, 没有第三个参数, 事件名称前要加"on";

<html>
<head>
<title>多个监听函数</title>
<script language="javascript">
function fnClick1(){
alert("我被fnClick1点击了");
}
function fnClick2(){
alert("我被fnClick2点击了");
//oP.detachEvent("onclick",fnClick1); //删除监听函数1
}
var oP;
window.onload = function(){
oP = document.getElementById("myP"); //找到对象
oP.attachEvent("onclick",fnClick1); //添加监听函数1
oP.attachEvent("onclick",fnClick2); //添加监听函数2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

标准DOM的事件监听：

addEventListener(事件名称,函数, 捕获)

element.addEventListener(event, function, useCapture)

removeEventListener(事件名称, 函数, 捕获)

element.removeEventListener(event, function, useCapture)

bCapture 是用于冒泡阶段还是捕获阶段(true:捕获 false:冒泡,默认值false)

注意:IE9版本已支持

<html>
<head>
<title>标准DOM的事件监听</title>
<script language="javascript">
function fnClick1(){
alert("我被fnClick1点击了");
//oP.removeEventListener("click",fnClick2,false); //删除监听函数2
}
function fnClick2(){
alert("我被fnClick2点击了");
}
var oP;
window.onload = function(){
oP = document.getElementById("myP"); //找到对象
oP.addEventListener("click",fnClick1,false); //添加监听函数1
oP.addEventListener("click",fnClick2,false); //添加监听函数2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
</html>

编写兼容性事件监听函数

function addEvent(obj, ev, fn){
    if(obj.addEventListener){
    obj.addEventListener(ev, fn, false);
    }else{
    obj.attachEvent('on'+ev, fn);
    }
}
function removeEvent(obj, ev, fn){
    if(obj.removeEventListener){
    obj.addEventListener(ev, fn, false);
    }else{
    obj.attachEvent('on'+ev, fn);
    }
}

实例:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function addEvent(obj, ev, fn){
    if(obj.addEventListener){
    obj.addEventListener(ev, fn, false);
    }else{
    obj.attachEvent('on'+ev, fn);
    }
}
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');

    addEvent(oBtn, 'click', function (){
    alert('a');
    });

    addEvent(oBtn, 'click', function (){
    alert('b');
    });
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表