ca888会员登录JavaScript事件用法分析

2019-06-29 10:35栏目:ca888圈内

事件对象

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

定义:我们用户在页面中进行的点击这个动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即:click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序,或者叫做事件侦听器。

IE8以下浏览器中先弹出“world”,再弹出“hello”。和DOM中事件触发顺序相反。

您可能感兴趣的文章:

  • JS鼠标事件大全 推荐收藏
  • js之事件冒泡和事件捕获详细介绍
  • js模拟点击事件实现代码
  • js实现touch移动触屏滑动事件
  • js 鼠标点击事件及其它捕获
  • js事件(Event)知识整理
  • js中获取事件对象的方法小结
  • 文本框中,回车键触发事件的js代码[多浏览器兼容]
  • JS判断文本框内容改变事件的简单实例
  • js事件监听机制(事件捕获)总结
  • javascript 鼠标事件总结
  • JS中动态添加事件(绑定事件)的代码

DOM中的事件对象

11、过渡事件

1、html事件处理程序

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时,弹出msg:click

DOM0级事件处理程序

  事件处理程序(event handler)或事件监听程序(event listener)

//www.jb51.net/article/86261.htm

响应事件的函数称为事件处理程序。

事件捕获

4、目标事件对象

添加事件处理程序:现在为按钮添加两个事件处理函数,一个弹出“hello”,一个弹出“world”。

事件类型分为以下几类:

DOM2级事件处理程序

8、打印事件

TE8及以下版本只支持attachEvent!

UI事件。
焦点事件。
鼠标与滚轮事件。
键盘与文本事件。
复合事件。
变动事件。
HTML5事件。
设备事件。
触摸与手势事件。

var btn = document.getElementById("myBtn");
// 添加,触发点击事件时先输出"myBtn"再输出"HaHa~"
btn.addEventListener("click", function() {
 console.log(this.id);
}, false);
btn.addEventListener("click", function() {
 console.log("HaHa~");
}, false);

  事件目标(event target)

JavaScript事件学习小结(一)事件流

事件类型

通过addEventListener()添加的事件只能通过removeEventListener()来删除。删除时传入的参数与添加时使用的参数应该保持一致。这也意味着通过addEventListener()添加的匿名函数将无法删除,因为无法将添加时传递的匿名函数传给removeEventListener(),即便在删除的时候写了一个一模一样的函数,但此时这个函数只是一个新的匿名函数。请看下面代码示例:

15、鼠标/键盘事件对象(属性、方法)

使用attachEvent()方法,事件处理程序会在全局作用域中运行,因此this等于window。

JavaScript通过事件与HTML交互。

“DOM2级事件”规定的事件包括三个阶段: 事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。

ca888会员登录 1

这种方式也有两种方法,都很简单:

事件

  • cancelBubble: 布尔值,可读可写,默认为false。将其设置为true时取消事件冒泡
  • returnValue: 布尔值,可读可写,默认为true。将其设置为false时取消事件的默认行为
  • srcElment: 元素,事件的目标元素,与DOM中的target属性相同
  • type: 字符串,事件类型

3、事件对象event(常量、属性、方法)

IE8及以下浏览器不支持addEventListener,在实际开发中如果要兼容到IE8及以下浏览器。如果用原生的绑定事件,需要做兼容处理,可利用jquery的bind代替。

事件流

IE事件处理程序

  事件模型

所以为了能删除事件处理程序,代码可以这样写:

DOM上的事件被触发时,会生成一个事件对象event。无论指定了什么事件处理程序都会传入event对象:准确的地说,event对象是在调用执行函数的执行环境中创建的,根据作用域链的定义,可知它是如何传入的。

您可能感兴趣的文章:

  • JS的Event事件对象使用方法
  • js中的触发事件对象event.srcElement与event.target详解
  • js中获取事件对象的方法小结
  • js 事件对象 鼠标滚轮效果演示说明
  • javascript 事件对象 坐标事件说明
  • Js获取事件对象代码
  • JavaScript 获取事件对象的注意点
  • JavaScript 事件对象的实现
  • JavaScript学习笔记之JS事件对象
  • JavaScript事件 "事件对象"的注意要点
  • 浅谈Javascript事件对象
  • JavaScript事件对象event用法分析

ca888会员登录 2

<input id="myBtn" type="button" value="click me!"/>
<script>
 var myBtn=document.getElementById("myBtn");
 myBtn.attachEvent("onclick",function(){
  alert(this===window);
 });
</script>

在上面代码中,指向同一对象的引用被认为是相同的,同样的申明生成的是两个外表相同但是存储在堆上两个不同位置的不同对象。

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息,包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

 

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
 alert("clicked!");
}
</script>

更新上述js中addEventListener和removeEventListener中的第三个参数为true,对比为false时的效果,便大约能理解事件流了。

在IE中,使用DOM0的方法添加事件处理程序时,event对象作为window对象的一个属性存在。如果是通过attachEvent()方法添加,则event对象是作为参数传入事件处理函数。下面是代码示例:

ca888会员登录 3

删除事件处理程序:

target:触发事件的动作直接作用的目标元素。
currentTarget:等于this,事件处理程序作用于的元素。
eventPhase:调用事件处理程序时,所处的事件流中的阶段。1,2,3 三个值分别对应事件流三阶段。
type:事件类型。单击事件对应 String: "click"。

event对象包含与创建它的特定事件有关的属性和方法,触发的事件类型不一样,可用的属性方法也有所不同。但是所有的事件都会有下列的属性或方法:

定义:事件对象是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类型的type属性和指定事件目标的target属性。每个事件类型都为其相关的事件对象定义一组属性。

2)this值等于事件的目标元素,这里目标元素是input。比如onclick="alert(this.value)"可以得到input元素的value值。

addEventListener(事件名,事件处理函数,是否在事件捕获时执行事件处理程序)

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

ca888会员登录 4

在编写跨浏览器的代码时,需牢记这点。

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove,它完全没有用,这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);
var btn = document.getElementById("myBtn");
btn.onclick = function() {
 var event = window.event;
 console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
 console.log(event.type); // "click"
});

  事件兼容

javaScript事件学习小结(四)event的公共成员(属性和方法)

如果某个元素支持某个事件,那么就有一个对应的HTML特性,用此特性就可以给其添加事件处理程序 。

这里的HTML事件处理程序指的是直接在HTML元素里面通过特性(attribute)定义的事件处理程序,请看下面的代码示例。这样是定的事件处理程序会创建一个封装着元素属性值的函数,this值等于事件的目标元素。通过这种方法指定事件处理程序存在不少缺点,不推荐使用。

2、事件移除:removeEventListener与detachEvent;

ca888会员登录 5

PS:关于javascript事件的详细说明可参考本站在线工具:

事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档)。以下面HTML页面为例,如果你点击了页面中的按钮,那么”click”事件会按照< button>、< body>、< html>、document的顺序传播。换句话说,事件冒泡指的就是事件从底层触发事件的元素开始沿着DOM树向上传播,直到document对象。

ca888会员登录 6

//www.jb51.net/article/86262.htm

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript窗口操作与技巧汇总》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log("From Bth ...");
 event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
 console.log("From Body ...");
};

IE中的事件流是事件冒泡(event bubbling);Netscape Communicator的事件流是事件捕获流。

//判断IE78 兼容性检测
   var isIE=!!window.ActiveXObject;
   var isIE6=isIE&&!window.XMLHttpRequest;
   var isIE8=isIE&&!!document.documentMode;
   var isIE7=isIE&&!isIE6&&!isIE8;
   if(isIE8 || isIE7){
    li.attachEvent("onclick",function(){
     _marker.openInfoWindow(_iw);
    }) 
   }else{
    li.addEventListener("click",function(){
     _marker.openInfoWindow(_iw);
    })
   }

HTML特性指定。

  • bubbles: 布尔值,表示事件是否冒泡
  • cancelable: 布尔值,表示是否可以取消事件的默认行为
  • currentTarget: 元素,事件处理程序当前正在处理事件的那个元素
  • defaultPrevented: 布尔值,表示是否调用过preventDefault()方法
  • detail: 整数,与事件相关的细节信息
  • eventPhase: 整数,调用事件处理程序的阶段,1表示捕获阶段,2表示目标阶段,3表示冒泡阶段
  • preventDefault(): 函数,取消事件的默认行为,cancelable为true时可以调用该方法
  • stopImmediatePropagation(): 函数,取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用
  • stopPropagation(): 函数,取消事件的进一步捕获或冒泡,bubbles为true时可以调用这个方法
  • target: 元素,事件的目标
  • trusted: 布尔值,为true时表示事件是浏览器生成的,否则表示事件是通过JS创建的
  • type: 字符串,被触发的事件类型
  • view: 与事件关联的抽象视图,等同于发生事件的window对象

4、阻止冒泡:e.stopPropagation与window.event.cancelBubble;

1)通过event变量可以直接访问事件本身,比如onclick="alert(event.type)"会弹出click事件。

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:ca888会员登录JavaScript事件用法分析