`

e , e.target 和 tagName 分别是什么

 
阅读更多

例一:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<dl id="test">
<dt>test</dt>
<dd><a href="http://www.baidu.com">test1</a></dd>
<dd><a href="http://www.baidu.com">test2</a></dd>
<dd><a href="http://www.baidu.com">test3</a></dd>
<dd><a href="http://www.baidu.com">test4</a></dd>
<dd><a href="http://www.baidu.com">test5</a></dd>
</dl>
<script type="text/javascript">

$('#test').click(function(e){
var itarget = $(e.target);
if (itarget[0].tagName=='A'){ 
alert(itarget.html());
return false;
}
}); 
</script>

说明:

e 是经过 jQuery 包装之后的事件对象,使用时我们不需要去考虑浏览器兼容性问题了。

e.target 取得的是事件发生的对象,即事件源,它是 DOM 对象。

tagName 是 DOM 对象的属性,用于获取 DOM 对象的标签名,取出来是大写的,你要取小写的用 nodeName。或者用toLowerCase()tagName转换成小写之后再进行比较。

 

例二:

e.target的含义

$(function(){
 
 
 
 
$("li:has(ul)").click(function(e){
 
 
 
 
 
 
 
 
if(this==
e.target){
 
 
 
 
 
 
 
 
 
 
 
 
$(this).children().toggle();
 
 
 
 
 
 
 
 
 
 
 
 
$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
 
 
 
 
 
 
 
 
}
 
 
 
 
 
 
 
 
return false; 
 
 
 
//避免不必要的事件混绕
 
 
 
 
}).css("cursor","pointer").click(); 
 
 
 
//加载时触发点击事件
 
 
 
 
 
 
 
//对于没有子项的菜单,统一设置
 
 
 
 
$("li:not(:has(ul))").css({
 
 
 
 
 
 
 
 
"cursor":"default",
 
 
 
 
 
 
 
 
"list-style-image":"none"
 
 
 
 
});
});

===========================

具体问题具体分析;当前目标
在event事件中代表点击对象;
loader事件:加载对象;
e只是参数,任意取值;对应即可;


e.target 是目标对象,e.event是目标所发生的事件。

分享到:
评论

相关推荐

    event.srcElement 用法笔记e.target

    if(event.srcElement.tagName.toLowerCase()=='td') { alert("行:" + (event.srcElement.parentNode.rowIndex + 1) + "列:" + (event.srcElement.cellIndex + 1)); } } ``` 在这个例子中,`event.srcElement....

    【JavaScript源代码】vue2+elementui进行hover提示的使用.docx

    console.log('enter', e.target.tagName); } }, mouseout(e) { if (e.target.tagName === 'OL') { console.log('leave', e.target.tagName); this.isShow = false; } } } }; ``` 在这里,我们在`&lt;ol&gt;`...

    javascript table 增加删除行,巧妙实现

    } else if (e.target.tagName.toLowerCase() === 'button') { var buttonId = e.target.id; if (buttonId === 'addBtn') { addRow('myTable', ['新姓名', '新年龄']); } else if (buttonId === 'delBtn') { ...

    适用菜单滑动

    if (e.target.tagName === 'LI') { e.target.style.height = '100px'; // 设置高度 } }); document.getElementById('sliding-menu').addEventListener('mouseout', function(e) { if (e.target.tagName === 'LI'...

    javascript菜单s

    if (e.target.tagName === 'LI') { e.target.querySelector('ul').style.display = 'block'; } }); document.getElementById('menu').addEventListener('mouseout', function(e) { if (e.target.tagName === 'LI...

    jquery需要的所有js文件

    if("area"===e){var f=b.parentNode,g=f.name,h;if(!b.href||!g||f.nodeName.toLowerCase()!=="map")return!1;h=a("img[usemap=#"+g+"]")[0];return!!h&&d(h)}return(/input|select|textarea|button|object/.test(e)...

    基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点

    代码如下: var Page_INIT = function () { $(document).bind(“mouseover”, function (e) {//鼠标移入 if (e.target.tagName.toUpperCase() == “INPUT”) { var input = e.target; if (input.type == “text”) {/...

    简单的html javascript导航栏

    if (e.target.tagName === 'LI') { e.target.querySelector('.submenu').classList.add('show'); } }); document.getElementById('menu').addEventListener('mouseout', function(e) { if (e.target.tagName ==...

    【JavaScript源代码】Javascript实现单选框效果.docx

    if (target.tagName.toLowerCase() === 'li') { target.style.backgroundColor = 'red'; // 其他处理... } } ``` 在这个例子中,`parent`是包含`li`元素的父元素,当点击`li`时,事件被委托给`parent`,然后通过...

    js实现可编辑表格,可以直接运行

    这里需要用到`event.preventDefault()`防止回车提交表单,并用`event.target.tagName`判断是否触发了回车。 ```javascript function handleCellClick(event) { if (event.target.tagName === 'TD') { let cell = ...

    JavaScript实现获取用户单击body中所有A标签内容的方法

    } else if (target.tagName == 'SPAN') { href = target.parentNode.href; } ``` 为了处理`href`中的空白字符,如空格、换行,我们需要进行字符串处理。这里使用`replace`方法移除这些字符,并确保字符串类型正确...

    javascript经典特效---框中左右选择.rar

    if (e.target.tagName.toLowerCase() === 'li') { var target = e.target.dataset.target; // 获取目标ID var detailElement = document.getElementById(target); // 获取详细信息元素 // 清除之前选中的项 ...

    Spring中文帮助文档

    2.3.3. 对bean命名pointcut( bean name pointcut element)的支持 2.3.4. 对AspectJ装载时织入(AspectJ load-time weaving)的支持 2.4. 中间层 2.4.1. 在XML里更为简单的声明性事务配置 2.4.2. 对Websphere ...

    Spring API

    2.3.3. 对bean命名pointcut( bean name pointcut element)的支持 2.3.4. 对AspectJ装载时织入(AspectJ load-time weaving)的支持 2.4. 中间层 2.4.1. 在XML里更为简单的声明性事务配置 2.4.2. 对Websphere ...

    javascript实现前端分页效果.docx

    if (e.target.tagName === 'LI') { pageSize = parseInt(e.target.dataset.num); renderTable(currentPage); } }); // 跳至页数 document.querySelector('.goPageInp').addEventListener('keyup', e =&gt; { if ...

    spring chm文档

    7.10. 使用TargetSources 7.10.1. 热交换目标源 7.10.2. 池化目标源 7.10.3. 原型目标源 7.10.4. ThreadLocal目标源 7.11. 定义新的通知类型 7.12. 更多资源 8. 测试 8.1. 简介 8.2. 单元测试 8.3. 集成...

    frontendjs-learning:小教程

    要提取这些示例,您需要在控制台中运行以下命令: ...第 1 课 组件方法和 Require.js 要继续本课程,您需要在项目文件夹中运行以下命令: git checkout -f first_lesson 在存储库中的示例中,... tagName === 'TD' ) {

    js选项卡制作.。。自定义选项卡

    if (e.target.tagName === 'A') { // 阻止链接默认行为 e.preventDefault(); // 获取点击的选项卡索引 const tabIndex = tabs.indexOf(e.target.parentNode); // 隐藏所有内容面板并显示对应选中的面板 ...

Global site tag (gtag.js) - Google Analytics