JavaScript中事件的target属性

target 事件属性可返回事件的目标节点(哪个 DOM 元素触发了该事件),如生成事件的元素、文档或窗口。

语法:event.target

<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function (event) {

                //返回的是大写的元素名BUTTON
                var targetNodeName = event.target.nodeName;
                //targetNodeName就是个字符串类型的元素名
                if (typeof targetNodeName == "string") {
                    //打印
                    alert("targetNodeName string")
                }
                $("div").html("点击事件由 " + targetNodeName + " 元素触发");
                //$(targetNodeName)选择这个元素
                if ($(targetNodeName).hasClass("button-class")) {
                    //打印
                    alert("targetNodeName has class button-class")
                }
                var parentNode = $(event.target.nodeName).parent()[0].nodeName.toLowerCase();
                //parentNode:body
                alert("parentNode:" + parentNode);

            });
        });
    </script>
</head>

<body>

<button class="button-class">这是一个按钮</button>
<div></div>
</body>
</html>
时间: 2024-10-10 02:49:15

JavaScript中事件的target属性的相关文章

javascript中事件概述

事件就是用户或浏览器自身执行的某种动作.诸如click.load.和mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器).事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload. 以下是跨浏览器的javascript中事件的相关方法 1 //跨浏览器的方法 2 var EventUtil={ 3 /* 4 与addHandler()对应的方法是removeHandler(),

关于JavaScript中事件的一些重要说明

1,JavaScript异步回调 <script language="javascript"> //注册回调函数loaded到处理函数window.onload上 window.onload = loaded; //把方法window.alert地址传递给show函数 var show = window.alert; function loaded(){ show("success"); } </script> 2,事件对象 下面的js实现当

JavaScript中事件回顾

事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言JavaScript中是一个非常非常重要的方法,遍地都是这种语法.什么是事件呢?在JavaScript中事件可以理解为发生的一件事情,事件这个对象记录了这个过程中所有的数据. 1.事件的兼容性处理 准所周知,现在很多浏览器中分为标准浏览器阵营Chrome.FireFox等,非标准浏览器就是IE为代表了,在写

JavaScript中事件委托(事件代理)详解

在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 事

全面理解Javascript中Function对象的属性和方法

函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这些属性和方法,这对于理解Javascript的继承机制具有一定的帮助. 属性(Properties) arguments 获取当前正在执行的 Function 对象的所有参数,是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length.还有就是arguments对象存储的是实际传递给

JavaScript中事件绑定的方法总结

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

javascript中对象访问自身属性的方式

在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文状态,即添加this关键字.如果没有指定,则上下文默认为window. 举例如下: 1 var obj = 2 { 3 name:"James", 4 showName:function(){ 5 alert(name); 6 } 7 } 通过控制台执行obj.showName() 输出为

html中超链接的target属性

<a> 标签的 target 属性规定在何处打开链接文档.(target就是目标的意思) 一共有(4+1种选择): 用法:<a target="value"> 值  描述 _blank  在新窗口中打开被链接文档. _self  默认.在相同的框架中打开被链接文档. _parent  在父框架集中打开被链接文档. _top  在整个窗口中打开被链接文档. framename 在指定的框架中打开被链接文档. 注意:前四种是系统默认的,同时 _blank和 _sel

JavaScript中操作对象的属性

1.操作对象的属性 注意: 标签属性与DOM对象属性的对应关系: 绝大部分2者是相同的,如:imgobj.src属性对应<img src="" >中src属性,但也有例外,如<div class="main" >中,操作class属性用divobj.className. CSS属性与DOM对象属性的对应关系: 1. 两者通过obj.style.css属性名 相对应   如:obj.style.width. 2.如果CSS属性带有横线,如bor