target属性用于返回最初触发事件的DOM元素。

在HTML文档中,我们为<p>元素绑定点击事件("click"),由于DOM元素的事件冒泡机制,我们点击<p>元素内的一个<span>元素就可以触发<p>元素上绑定的click事件。

target属性就用于返回最初触发事件的DOM元素,也就是本例中的<span>元素。(currentTarget属性始终返回的都是该<p>元素)

该属性属于jQuery的Event对象(实例)。

语法

jQuery 1.3 新增该属性。

eventObject.target

返回值

target属性的返回值是Element类型,返回最初触发事件的DOM元素。

示例&说明

请参考下面这段HTML示例代码:

<div id="n1" style="height: 100px; background: #eee;" >
    <br>
    <p id="n2" style="background: #999;" >段落文本...段落文本...<br>
        <span id="n3" style="background: #fff;" >专注于编程开发技术分享</span>
    </p>
</div>

jQuery示例代码如下(以下点击事件中的event.currentTarget属性始终指向div元素):

$("div").click( function(event) {
    alert("最初触发事件的是:" + event.target.tagName + "#" + event.target.id);  
} ); // 点击span元素区域,弹出:"最初触发事件的是:SPAN#n3"
// 点击p元素自身区域,弹出:"最初触发事件的是:P#n2"
// 点击div元素自身区域,弹出:"最初触发事件的是:DIV#n1" 转载的网址:http://www.365mini.com/page/jquery-event-target.htm

target属性用于返回最初触发事件的DOM元素。的更多相关文章

  1. 父元素onmouseover触发事件在父子元素间移动不停触发的问题

    今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  3. C#实现某一属性值变化时触发事件

    在我们做工业软件中,经常会遇到要实时监控某一点,在这个点变化时去做一些事情 放入程序里呢,就是要实时监控某一属性的值,当值发生变化时触发事件,其核心就是借助属性的Set方法,来判断当前set的值是否与 ...

  4. js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素

    写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5.当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用, 且透明度为1. <s ...

  5. 关于Input内容改变的触发事件

    1.onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <se ...

  6. input 内容改变的触发事件

    1. onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <s ...

  7. bootstrap datepicker 属性设置 以及方法和事件

    DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月 ...

  8. datepicker 属性设置 以及方法和事件

    DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月 ...

  9. input 内容发生改变时触发事件

    oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失 ...

随机推荐

  1. windows下PyCharm安装及使用

    一.首先安装pycharm,可以参考这篇文章:http://www.jianshu.com/p/042324342bf4 1.win10_X64,其他Win版本也可以. 2.PyCharm版本:Pro ...

  2. 微信小程序 取随机数

    第一思路 如:现在要从50<  . =<100内取一个随机数: ran.Next(1,50)生成的是1-50的随机数+50 结束 第二思路 Math.random()的取值范围是: 0&l ...

  3. C++ Circle

    作业链接 https://github.com/How-Come/object-oriented/tree/master/Circle

  4. Android混合式开发(Hybrid)

    安卓混合式开发(Hybrid) 1 环境搭建 1.1 首先,下载 Android Studio (Intellij Idea) 下载地址:http://www.android-studio.org/ ...

  5. 【http学习杂记】2017年7月14日

    1. 连接超时 连接超时是tcp协议层次, 此时服务器还没有处理请求数据,也就是说服务器的逻辑开没有执行 2. 请求超时 请求超时属于服务器已经连接成功并开始处理,但是时间比较长,大于你设置的请求超时 ...

  6. MySQL安装俩个不同版本服务出现的问题(1053)

    在使用命令mysqld --install servicename --defaults-file='file_name'创建mysql服务时,系统 已提示创建服务成功,但是net start命令提示 ...

  7. ubuntu下以16进制形式查看class文件、反编译class文件

    参考:https://blog.csdn.net/xyh930929/article/details/83860464 1.vim HelloWorld.class 2.输入英文状态下的冒号:,然后输 ...

  8. 一些需要禁用的PHP危险函数

    phpinfo()功能描述:输出 PHP 环境信息以及相关的模块.WEB 环境等信息.危险等级:中 passthru()功能描述:允许执行一个外部程序并回显输出,类似于 exec().危险等级:高 e ...

  9. centos下mysqlreport安装和使用

    首先查看你的机器是否安装了perl: #perl -v 显示版本号即表示已安装 然后: #yum install perl-DBD-mysql perl-DBI #yum install mysqlr ...

  10. programming-languages学习笔记--第9部分

    programming-languages学习笔记–第9部分 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src ...