js事件驱动机制浏览器兼容处理方法

2024-10-29 23:25:50

3.1. 事件是如何产生的 *

第一种情况，用户对网页做了某些操作，比如，点击了一个按钮，产生点击事件。第二种情况，用户没有对网页做操作，也可能产生事件，比如浏览器已经将整个页面加载完毕，会产生加载完成事件。当事件产生以后，浏览器会查找产生事件的节点有没有绑订相应的事件处理代码。如果有，则调用该代码来处理。如果没有，会继续向上查找父节点，有没有对应的事件处理代码(事件冒泡)。

3.2. 绑订事件处理代码 **

1) 绑订事件处理代码到html标记乊上

比如: <a id="a1" href="" onclick="f1();">click</a>

2) 绑订事件处理代码到dom节点之上

var obj = document.getElementById('a1'); obj.onclick=f1;

注意：

a. f1不要加"()",加"()"表示立即执行f1这个凼数。

b. 可以使用匿名凼数迚行绑订。

即： obj.onclick=function(){ //代码。 }

c. 绑订事件处理代码到dom节点之上，可以将js代码不html完全分离，方便代码的维护。

d. 如果要给绑订的凼数传参。可以使用匿名凼数来解决。

即: obj.onclick=function(){ f(参数); }

3) 使用浏览器自带的绑订方式（了解）

不同的浏览器，有各自独有的绑订方式，因为丌兼容，所以尽量少用。

Script脚本可以在<body>中写

等价于下图

如果传参数怎么办？使用匿名凼数

【案例3.1】绑订事件处理代码到html标记之上 **

3.3. 事件对象 ***

1) 获得事件对象

IE浏览器: 可以直接使用event获得

firefox: 必须给方法添加一个参数event

一般为了兼容ie,firefox，给方法添加一个参数event

2) 事件对象的作用

a. 获得鼠标点击的坐标

event.clientX event.clientY

b. 获得事件源(产生事件的那个对象)

firefox: event.target获得 IE浏览器: event.srcElement获得

3.4. 事件冒泡 **

1) 什么是事件冒泡？当一个节点产生事件以后，该事件会依次向上传递(先传给父节点，如果父节点还有父节点，再向上传递)。

2) 如何禁止冒泡? event.cancelBubble = true;

2) “事件冒泡”现象关闭对话框“你点击了一个链接”，继续弹出对话框“你点击了一个div”

【案例3.4】事件对象 **

<html>

------------------------------------------------------------------------------------------------------

js是采用事件驱动(event-driven)响应用户操作的。

比如通过鼠标或者按键在浏览器窗口或者网页元素(按钮,文本框...)上执行的操作,我们称之为事件(Event)。

由鼠标或热键引发的一连串程序的动作,称之为事件驱动 (Event-Driver)。

对事件进行处理程序或函数，我们称之为事件处理程序 (Event Handler)。

----------------------------------------------------------------------------------------------------------------------

浏览器兼容处理

<script language="javascript">
<!--
   if(window.XMLHttpRequest){ //Mozilla, Safari, IE7,IE8
   if(!window.ActiveXObject){ // Mozilla, Safari,
     alert('Mozilla, Safari');
   }else{
     alert('IE7 .8');
   }
 }else {
   alert('IE6');
 }
//-->
</script>

-------------------------------------------------------------------------------待续

一个事件，需要多个方法，可以用，隔开就可以了

以上这篇js事件驱动机制浏览器兼容处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

兼容浏览器的js事件绑定函数(详解)

因为javascript中所有对象都集成与Object,那么只有给Object原型添加一个事件绑定函数,就不需要在处理绑定事件的时候,每次写一长串代码,直接调用即可.在代码中添加红色部分代码,直接便可以在代码中直接调用 <div id="mydiv" style="cursor:pointer; background-color:#F00">nihaoa</div> <script language="javascript&q
JS的事件绑定深入认识

一.传统事件模型传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了. 脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行.但也存在不足之处: 1.一个事件绑定多个事件监听函数,后者将覆盖前者. 2.需要限制重复绑定的情况 3.标准化event对象二.现代事件绑定 DOM2级事件定义了两个方法用于添加.删除事件:addEventListener().removeEventLi
详解javascript事件绑定使用方法

由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误.如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了. IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定 DO
关于JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数一.在DOM元素中直接绑定也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler
js 实现一些跨浏览器的事件方法详解及实例

js实现一些跨浏览器的事件方法用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (ele
js绑定事件和解绑事件

在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法只支持IE678,不兼容其他浏览器 addEventListener方法兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春
js事件驱动机制浏览器兼容处理方法

3.1. 事件是如何产生的 * 第一种情况,用户对网页做了某些操作,比如,点击了一个按钮,产生点击事件. 第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件.当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码.如果有,则调用该代码来处理.如果没有,会继续向上查找父节点,有没有对应的事件处理代码(事件冒泡). 3.2. 绑订事件处理代码 ** 1) 绑订事件处理代码到html标记乊上比如: <a id="a1"
JS动态改变浏览器标题的方法

本文实例讲述了JS动态改变浏览器标题的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <hea
理解 Node.js 事件驱动机制的原理

学习 Node.js 一定要理解的内容之一,文中主要涉及到了 EventEmitter 的使用和一些异步情况的处理,比较偏基础,值得一读. 大多数 Node.js 对象都依赖了 EventEmitter 模块来监听和响应事件,比如我们常用的 HTTP requests, responses, 以及 streams. const EventEmitter = require('events'); 事件驱动机制的最简单形式,是在 Node.js 中十分流行的回调函数,例如 fs.readFile.
js/jquery判断浏览器类型的方法小结

JS获取浏览器信息复制代码代码如下: 浏览器代码名称:navigator.appCodeName 浏览器名称:navigator.appName 浏览器版本号:navigator.appVersion 对Java的支持:navigator.javaEnabled() MIME类型(数组):navigator.mimeTypes 系统平台:navigator.platform 插件(数组):navigator.plugins 用户代理:navigator.userAgent js判断IE浏览器
JS清除IE浏览器缓存的方法

js中自动清除ie缓存方法 - 常用对于动态文件,比如 index.asp?id=... 或者 index.aspx?id=... 相信有经验的程序员都知道怎样禁止浏览器缓存数据了. 但是对于静态文件(css,jpg,gif等等), 在什么场合下面我们需要禁止浏览器缓存他们,怎么做? 方法一:Dojo中我们可以用简单的方法完成:在dojo.xhrGet(包括post)等方法中都包含preventCache属性,此属性的含义: "默认为启用浏览器缓存,否则将通过自动增加不同的参数来确保浏览器缓存
js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结原创

最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下原来我用的是从pjblog上的复制代码代码如下: //查找网页内宽度太大的图片进行缩放以及PNG纠正 function ReImgSize(){ for (i=0;i<document.images.length;i++) { if (document.all){ if (document.images[i].width>
js Date()日期函数浏览器兼容问题解决方法

一般直接new Date() 是不会出现兼容性问题的,而 new Date(datetimeformatstring) 常常会出现浏览器兼容性问题,为什么,datetimeformatstring中的某些格式浏览器不兼容. 1. 无参 //无参所有浏览器都兼容 var dateTime = new Date(); 2.日期参数 //日期参数格式1 var dateTime = new Date("2017-09-12"); a. IE > IE9-(不兼容) > IE
JS获取各种浏览器窗口大小的方法

常用:JS 获取浏览器窗口大小复制代码代码如下: // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeig
文本框中,回车键触发事件的js代码[多浏览器兼容]

判断是否按下的为回车非常简单: 复制代码代码如下: function EnterPress(){ if(event.keyCode == 13){ ... } } IE6的onkeypress会接受"回车事件",而onkeydown不会接受 IE8的onkeypress不会接受"回车事件",而onkeydown会接受 ...不用纠结于此,两个都写上吧复制代码代码如下: <input type="text" onkeypress=&qu
raphael.js绘制中国地图地图绘制方法

最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

js事件驱动机制 浏览器兼容处理方法

相关推荐

随机推荐

js事件驱动机制浏览器兼容处理方法