`

Dom的“事件类型”和“事件监听”

阅读更多

代码一:普通的写法(简单写法)

<html>
<title></title>
<head>
<script type="text/javascript">
	function clickme(){
		alert(88);
	}
</script>
</head>
<body>
	<div id="click" onclick="javascript:clickme();">click me</div>
</body>
</html>

 

 

代码二:有时候可以解决跨浏览器的写法(要掌握这种写法的思想)。这种写法叫“事件的监听”。

<html>
<title></title>
<head>
<script type="text/javascript">
	window.onload = function(){
		var obj = document.getElementById("click");
		obj.onclick = function(){
			alert(55);
		}
	}
</script>
</head>
<body>
	<div id="click">click me</div>
</body>
</html>

 这里的window.onload表示页面加载的时候来调用,这种写法相当于在body里面加入<body onload="javascript:clickme();" ></body>,但是上面的window.onload适合于没有<body>标签的情况。比如JSP页面中的top.jsp或者bottom.jsp等等。

 

 

Dom的“事件监听”:

    上面的那个“事件监听”的写法非常单一,它只能给<div>标签添加一个“事件监听”,而不能添加多个“事件监听”。下面介绍的两种方法都可以添加多个“事件监听”。

1. 只适合于IE浏览器的“事件监听”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>IE的监听函数</title>
<script language="javascript">
function fnClick(){
	alert("我被点击了");
	oP.detachEvent("onclick",fnClick);		//点击了一次后删除监听函数
}
var oP;
window.onload = function(){
	oP = document.getElementById("myP");	//找到对象
	oP.attachEvent("onclick",fnClick);		//添加监听函数
}
</script>
</head>

<body>
	<div>
		<p id="myP">Click Me</p>
	</div>
</body>
</html>

 

2.适合于所有的浏览器的"事件监听"。
下面函数中的"false"表示:“冒泡型事件”而不是“捕获型事件”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

 

 

Dom的“事件类型”:

     IE浏览器的事件对象是window对象的一个属性event。

      op.onclick = function(){

             var oEvent = window.event;

      }

      而Dom中规定event对象必须作为唯一的参数传递给事件处理函数。

      op.onclick = function(oEvent){

              //....

      }

      所以为了解决浏览器的兼容问题:采用如下方法:

      op.onclick = function(oEvent){

             if(window.event) oEvent = window.event;

       }

例子如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>事件的类型</title>
<script language="javascript">
function handle(oEvent){
	var oDiv = document.getElementById("display");
	if(window.event) oEvent = window.event;		//处理兼容性,获得事件对象
	if(oEvent.type == "click")					//检测事件名称
		oDiv.innerHTML += "你点击了我&nbsp&nbsp;";
	else if( oEvent.type == "mouseover")
		oDiv.innerHTML += "你移动到我上方了&nbsp&nbsp;";
		
}
window.onload = function(){
	var oImg = document.getElementsByTagName("img")[0];
	oImg.onclick = handle;
	oImg.onmouseover = handle;
}
</script>
</head>

<body>
	<img src="01.jpg" border="0">
    <div id="display"></div>
</body>
</html>

 

分享到:
评论

相关推荐

    chrome根据dom找到dom上的事件.zip

    Chrome浏览器作为一款广泛使用的Web浏览器,提供了强大的开发者工具来帮助开发者进行网页调试和优化,其中包括查找并分析DOM节点上的事件监听器。本教程将围绕“如何在Chrome中根据DOM找到DOM上的事件”这一主题展开...

    jquery监听DIV的事件

    4. 视口可见性变化:若关心元素是否在视口内,可以使用`scroll`事件和`Intersection Observer API`。 下面是一个监听尺寸变化的例子: ```javascript $("#myDiv").on("resize", function() { // 这里的代码会在...

    手写DOM事件模型

    DOM2级事件模型引入了事件目标、事件监听器和事件对象,使得事件处理更加灵活。 ### 2. 自定义事件模型 要实现一个简单的DOM事件模型,我们需要关注以下几个关键点: - **事件注册**:为DOM元素添加事件监听器。 ...

    jquery 监听 键盘 事件

    在JavaScript的世界里,jQuery库为开发者提供了方便快捷的方式来操作DOM、处理事件、执行动画和Ajax交互。其中,监听键盘事件是常见的用户交互处理之一。本文将深入探讨如何使用jQuery来监听键盘事件,以及相关的...

    jQuery技巧之让任何组件都支持类似DOM的事件管理

    本文将探讨如何利用jQuery实现一个技巧,使得任何组件都能够支持类似于DOM事件的管理,包括事件派发、添加/删除监听器、事件冒泡和阻止默认行为。 首先,我们来看传统的发布-订阅模式。这种模式通常用于实现组件间...

    DOM.zip_DOM_www.692dom,com

    7. **事件委托**: 通过在父元素上监听事件,然后根据事件的目标子元素来处理,可以减少事件监听器的数量,提高性能。 8. **自定义事件**: 通过`CustomEvent`构造函数可以创建自定义事件,允许在代码中触发自定义的...

    轻量级的DOM事件委托小于1KB

    4. **灵活性**:可能支持添加自定义事件类型,或者提供了灵活的事件绑定和解绑方式,以适应不同的应用场景。 5. **性能优化**:可能包括事件目标的判断优化,避免不必要的计算,以及利用事件捕获阶段或阻止冒泡来...

    Html dom _BOM 模型 _事件处理机制 _面向对象基础

    以上内容中包含了对DOM中各种对象的属性和方法的使用,BOM模型的核心对象window及其常用方法,JavaScript中的事件处理机制,包括事件是如何产生的、事件对象的特性以及事件冒泡现象,以及面向对象编程的基础知识,...

    chrome根据事件找到dom.zip如何根据网页上发生的事件,而找事件源,也就是说找出是dom结点触发的事件

    这里你可以看到“click”事件和其他各种事件,以及它们对应的DOM节点。 **2. 查找事件源** 当你知道事件类型后,可以回到“Elements”选项卡。在DOM树中找到你感兴趣的元素,选中它。此时,如果你在该元素上触发了...

    Angular4.x Event (DOM事件和自定义事件详解)

    Angular4.x版本对事件的处理,特别是DOM事件和自定义事件的绑定与处理,有着详细的机制和约定。本文将详细讨论如何在Angular中处理这两种类型的事件,包括事件冒泡的概念,以及如何使用@Output()装饰器和...

    原生JS经典小项目-DOM练习

    这在批量操作元素,如改变样式或添加事件监听器时非常有用。 2. `map()`:创建一个新的数组,新数组中的元素是原始数组元素经过函数处理后的结果。在DOM操作中,这可用于生成新的DOM节点集合。 3. `filter()`:...

    jquerydom对象的事件隐藏显示和对象数组示例

    `.bind(type,fn)`方法用于将一个或多个事件监听器绑定到选择器匹配的元素上,其中`type`是事件类型,`fn`是当事件触发时执行的函数。而`.click()`则是一个简写方式,它只绑定点击事件。例如,`$('#d1').click...

    间隔函数及事件监听.zip

    这里的`element`是你想要监听事件的DOM元素,`eventName`是你要监听的事件类型,`callbackFunction`是在事件触发时执行的函数。例如,给按钮添加点击事件监听器: ```html 点击我 ``` ```javascript document....

    html dom 底层 javascript

    DOMEvent接口定义了事件处理机制,包括事件类型、事件属性和事件传播模型。这使得开发者可以创建事件监听器,响应用户的输入和页面的状态变化。 #### DOM 样式引用 DOMStyle接口和相关的对象如`...

    Gecko DOM Reference(Firefox DOM参考手册)

    2. **事件处理**:详述DOM事件模型,包括事件类型、事件目标、事件传播和事件处理函数。 3. **CSS和样式**:解释如何通过DOM访问和修改元素的CSS样式。 4. **遍历和操作**:指导如何遍历DOM树,添加、删除或修改节点...

    javascript_DOM操作

    8. **DOM变更事件**: 当DOM结构发生变化时,可以监听 `DOMContentLoaded`, `DOMNodeInserted`, `DOMNodeRemoved` 等事件。 9. **DOM遍历和修改**: `createDocumentFragment()` 可用于在内存中构建DOM片段,减少页面...

    jquery 监听页面按钮

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery监听页面上的按钮事件,以实现丰富的用户交互。 一、jQuery的基本概念 jQuery是...

    JQuery DoM和ajax 操作

    6. **全局AJAX事件**: 如`ajaxStart()`, `ajaxStop()`, `ajaxSuccess()`, `ajaxError()`,可以监听所有AJAX请求的状态,实现全局的控制和反馈。 通过深入理解并熟练运用jQuery的DOM操作和AJAX功能,开发者能够构建...

    JS中dom0级事件和dom2级事件的区别介绍

    总结来说,DOM0级事件和DOM2级事件的主要区别在于,DOM0级只能为每个事件类型绑定一个处理函数,而DOM2级允许绑定多个处理函数并且不会相互覆盖。这两种机制在不同的场景下都有它们的应用价值,但随着现代Web应用对...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    学习如何在DOM元素上绑定事件和编写事件处理函数是提高网页交互性的关键。 6. DOM编程实践:通过实例演示如何使用JavaScript的DOM API来实现各种动态网页效果,比如创建动态的导航菜单、表单验证、内容的异步加载...

Global site tag (gtag.js) - Google Analytics