第九课 事件的状态Event 对象

<ul>
    <li>1itme1</li>
    <li>2itme2</li>
    <li>3itme3</li>
    <li>4itme4</li>
    <li>5itme5</li>
</ul>

<script>
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].addEventListener("click", function (ev) {  //ev代表的当前事件
            alert(ev.target.innerText);
        })
    }

</script>

event详解

https://www.w3school.com.cn/jsref/dom_obj_event.asp

target 返回触发此事件的元素(事件的目标节点)。   背下这句话,事件、元素、目标节点

原文地址:https://www.cnblogs.com/no000000/p/12287194.html

时间: 2024-10-15 01:03:37

第九课 事件的状态Event 对象的相关文章

现代事件处理程序和Event对象对浏览器兼容性的判断和解决

兼容性问题的解决: 因为 IE 和 DOM 对于现代事件处理程序指派的方式不同,为了保证我们编写的代码在 IE 和 DOM浏览器系列下都能用,我们可以用如下代码来解决兼容性问题: var fnClick1 = function() { aleart("我被点击了";) } var fnClick2 = function() { aleart("我也被点击了";) } var oDiv = document.getElementById("div1"

js事件中的event对象

addEvent(oDiv,"click",function(event){ console.log(event.bubbles+"事件是否冒泡"); console.log(event.cancelable +"是否可以取消默认行为") console.log(event.defaultPrevented+"DOM3新增,是否已经调用了preventDefault()"); console.log(event.target)

前端程序员的蜕变——JS的 event 对象属性、使用实例、兼容性处理(极大提高代码效率、减少代码量)

下面讨论一下 js 中的 Event 对象,主要从以下三个方面详细的描述(点击标题可跳转到对应部分): 1.什么是event 2.怎么用event,用他该注意什么,几个简单实际应用 3.event在不同浏览器的存在的兼容问题,及如何去解决  1.  什么是event Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态等等.说的通俗一点就是,event是JS的一个系统内置对象.平时无法使用,当DOM元素发生按键.鼠标等等各种事件时,系统会自动根据D

event 对象 小记

event对象的属性提供了有关事件的细节并且通过event对象的方法,可以控制事件的继续传播和阻止事件的默认行为 2级DOM Events 标准定义了一个标准的事件模型  被除了IE外的所有现代浏览器实现     在标准事件模型中event对象传递给事件句柄函数,在处理事件的时候获取事件发生的一些属性和控制事件的一些行为(冒泡和默认行为)   在标准事件模型中,Event的各种子接口定义了额外的属性,也就是可以定义多种种类的event对象  而IE只有一种event对象 应用于所有的事件处理 2

焦点 、event对象、事件冒泡、事件绑定、AJAX知识点备忘

焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 设置焦点的几种方式: 1.点击 2.TAB键 3.JS onfocus   onblur 属性 var oinp=document.getElementById('shuru') oinp.onfocus=function(){ if(oinp.value=='请输入'){ oinp.value='' } } oinp.onblur=function(){ if(oinp.value==''){ oinp

02 js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍

IE 左键是 window.event.button = 1 右键是 window.event.button = 2 中键是 window.event.button = 4 没有按键动作window.event.button = 0 Firefox 左键是 event.button = 0 右键是 event.button = 2 中键是 event.button = 1 没有按键动作 event.button = 0 Opera 7.23/7.54 鼠标左键是 window.event.but

JavaScript之DOM-8 Event对象(事件概述、事件处理、event对象)

一.事件概述 事件概述 - 当用户与 Web 页面进行某些交互时,解释器就会创建相应的event对象以描述事件信息.常见的事件有: - 用户点击页面上的某项内容 - 鼠标经过特定的元素 - 用户按下键盘上的某个按键 - 用户滚动窗口或改变窗口大小 - 页面元素加载完成或加载失败 - ... - 1995年 IE4 浏览器就已经定义了自己的事件模型,而DOM模型2004年才最终确定标准的事件模型,并被其它浏览器所支持.所以事件处理需要注意兼容性问题 事件句柄 - 事件句柄(又称事件处理函数.事件监

Javascript事件函数传递的event对象参数

Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置:(在DOM标准中,这两个属性值都不考虑

JS:event对象下的target属性和取消冒泡事件

1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = function(){  alert(123);//123 } event对象下的target方法 :获取事件的目标,不用document.getElementById("box")即可获取目标; //W3C下 document.onclick = function(evt){ var e = evt