-
2021-06-13 14:38:32
给我你的怀抱2017-07-05 10:39:039楼
写成这样看看
$(function() {
leftMenu();
function show() {
alert('hhhhhhhh');
}
function leftMenu() {
var html = '
click me'
$('#box').append(html);
}
})
直接调show()它其实是立即执行的,如果写成οnclick="show()",$(document).ready()是文档加载完后执行的,当页面结构完成了,你再点击触发show(),这个时候就会去window下面查找show(),当然结果就是undefined
如果实在要写在$(funciton(){})里,可以这样做:
$(function() {
leftMenu();
/*function show() {
alert('hhhhhhhh');
}*/
function leftMenu() {
var html = '
click me'
$('#box').append(html);
}
//做个事件委托
$('body').on('click', $('.show'), function() {
alert('aaaaa')
})
})
更多相关内容 -
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突
2021-12-22 09:30:31场景:点击行内按钮事件的时候,同时也出发触发了行的事件; 因为行内按钮的父元素是单元格,而单元格的父元素是行; 最里层子元素接收到事件后,再层层向上传递给父元素;场景:有一个需求,点击表格的每一行,展示出相应的详情弹窗,由于缺少相应的阻止冒泡操作,导致在点击行内按钮事件的时候,同时也出发触发了行的事件;
因为行内按钮的父元素是单元格,而单元格的父元素是行;
最里层子元素接收到事件后,再层层向上传递给父元素;
单击行触发事件: @row-click="openDetail"
<el-table id="out-table" style="width: 100%" :data="tableData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" @row-click="openDetail" >
解决办法:
在相应的点击事件上加 .native.stop
因为是不是原生标签;而是el,所以.native必须加;
<el-table-column label="操作" width="200"> <template slot-scope="scope"> <el-button type="text" size="medium" @click.native.stop="editTable(scope.row)" >编辑</el-button > <el-button type="text" size="medium" @click.native.stop="delTable(scope.row.id)" >删除</el-button > </template> </el-table-column>
-
html行内触发事件的this指向(原生js学习)
2021-06-13 14:39:20// 1 这个结果恰好和行内执行事件的结果相反,这里会弹出1,而非10。因为它的m函数并非去全局找,而是按照普通的函数作用域链来查找。。。理论支持是函数执行在定义的作用域里。 例五: var obj={ A:function(){ ...参考:
http://www..com/snandy/archive/2011/03/07/1976317.html
var m=function(){
alert(2);
}
var obj={
A:function(){
},
m:function(){
alert(3);
},
B:function(){
var m=function(){
alert(1);
};
var div=document.createElement("div");
div.innerHTML="
xx
";document.body.appendChild(div);
}
};
obj.B();
看起来好像οnclick=m()会调用B函数里头定义的m函数,其实不会。这里新增html,且是html行内触发事件,所以函数执行在全局,m()调的是全局定义的m函数,结果弹出2,和B函数作用域一点关系都没有。
(2)
潜在包含了一层匿名函数:
例一:
1
,值为1
自己。这里相当于:
(p#f).οnclick=function(){
console.log(this);
};
所以this当然是调用事件的p#f
例二:
1
相当于:
(p#f).οnclick=function(){
function A(){alert(this==window);};
A();
};
所以A里头的this当然是window。
例三:
1
var A=function(m){
alert(m.className); //点击弹出"x"
};
这里相当于:
p#f.οnclick=function(){
A(this);
};
function体里的this必然是#f元素对象,所以可以弹出m.className。。
例四:
var m=function(){
alert(10);
}
var obj={
B:function(){
var m=function(){
alert(1);
};
var div=document.createElement("div");
div.innerHTML="cutemurphy";
div.id="gg";
document.body.appendChild(div);
document.getElementById("gg").addEventListener("click",m,false);
}
};
obj.B(); // 1
这个结果恰好和行内执行事件的结果相反,这里会弹出1,而非10。因为它的m函数并非去全局找,而是按照普通的函数作用域链来查找。。。理论支持是函数执行在定义的作用域里。
例五:
var obj={
A:function(){
console.log(this);
},
B:function(){
var m=function(){
alert(1);
};
var div=document.createElement("div");
div.innerHTML="
xx
";document.body.appendChild(div);
var xNode=document.getElementById("xx");
xNode.addEventListener("click",this.A,false);
}
};
obj.B(); // xNode;
这里很有意思,addEventListener里的this.A的this指的是obj,而this.A的函数体function(){console.log(this)}里的this又是xNode。
-
JavaScript DOM事件(行内事件、L0L1、L2L3事件)
2021-01-04 19:23:28JavaScript DOM事件JavaScript事件事件监听什么是事件监听事件监听的三要素行内事件什么是行内事件?行内事件调用函数DOM L0 L1事件DOM L1 L2 事件事件移除什么是事件移除?L0 L1 事件移除L1 L2 事件移除事件中的...JavaScript DOM事件
JavaScript事件
什么是JavaScript事件
事件是编程语言中的术语,它是用来描述程序的行为或状态的,一旦行为或状态发生改变,便立即调用一个函数
如: 你点击了一个按钮 就叫触发了一个事件事件监听
什么是事件监听
就是让程序检测是否有事件产生 ,一但有事件产生,就立即调用一个函数做出响应
语法: 元素.addEventListener(‘click’,事件触发时调用的回调函数)
语法:
元素.addEventListener(‘事件类型’,事件触发时调用的回调函数)事件监听的三要素
事件源: 哪个DOM元素被事件触发了,要获取DOM 元素
事件类型: 用什么方式触发 比如鼠标点击 click 鼠标经过mouseover等
事件调用的回调函数:事件触发时调用的函数 要做什么事行内事件
什么是行内事件?
监听一个元素的事件 ,也可以写在标签内 ,这中写法称之为行内事件
<标签 on事件名='代码'></标签> <button onclick='alert('我被点击了')'>按钮</button>
行内事件调用函数
<button onclick='fn('我被点击了')'>按钮</button> function fn () { console.log(..) }
也可以给函数传参 行内的括号内传递的是实参 函数后的括号传递的形参
注意此时函数内内的this指向windowDOM L0 L1事件
DOM L0 指的是 DOM 刚诞生石的版本
语法: 元素.on事件名 = 触发事件时的调用的函数btn.onclick = function () { alert('我被点击了') }
这种写法就是在事件类型前面固定加on 即是监听此类事件
L0 L1相同的事件只能绑定一次DOM L1 L2 事件
元素.addEventListener(‘事件类型’,事件触发时调用的回调函数)
btn.addEventListener('click',function () { console.log('我被点击了') })
L2 L3 相同的事件类型可以绑定多次
事件移除
什么是事件移除?
指的是移除监听的事件,可以提升性能
L0 L1 事件移除
元素.on事件名 = null
btn.onclick = null
L1 L2 事件移除
元素.removeEventListener(‘事件类型’,要移除的回调函数)
btn.removeEventListener('click',fn)
注: 如果添加事件监听的时候用的是匿名函数,则无法移除
事件中的this
任何函数内都用this 事件出发时的回调函数也不例外
事件回调函数里的this 指向的是 当前被添加事件监听的DOM元素对象
简单理解 给哪个元素调用的addEventListener / onclick 回调函数 / 函数里面的this就是哪个元素 -
jQuery jQuery样式操作、click事件绑定
2021-08-20 19:23:01jQuery jQuery样式操作样式操作1、获取样式属性与操作样式属性2、操作样式类名3、click事件绑定4、使用.toggleClass切换类样式 1、获取样式属性与操作样式属性 <!DOCTYPE html> <html lang="en"> <... -
jquery table的click事件 会覆盖tr的click事件 咋办
2017-11-24 01:48:22$(table).click(function(){ alert(1) }) $(table tbody tr).click(funtion(){ alert(2)}) 这样子只会alert(1) 不会弹出2 有啥办法让他们都执行吗 -
关于行内元素onclick事件,为什么会出错?
2018-03-14 22:23:36作为一个初步学习的Java程序员来说,很少写... 刚入职就开始干活,写起来也是各种的酸爽吧(不熟,,)对于行内的onclick调用函数,写到$(function(){})的时候就是各种的没有反应。在网上看看资料原来是: $(functi... -
关于jquery的obj.click()、和obj.on()以及行内的onclick事件
2017-07-29 14:27:17一般通过jQuery写触发事件是我们通常写的是obj.事件类型()。 以下以点击事件为例: 通常我们直接写obj.click();...行内的onclick事件也可以实现对js的动态绑定事件。 以下是我自己整理的关于三种写法的使用 -
element行点击事件与行内按钮点击事件的同时实现与隔离
2019-12-27 14:50:30在用vue写前端、用element作ui时,写表格遇到的小问题:点击行触发多选框选中与点击行内的按钮冲突; 如何解决:利用handleRowClick(row, column, event)的column.label将有按钮的列隔离起来即可; 完整的html以及单... -
javascript中的点击事件click的写法
2019-03-28 13:31:38javascript中click方法: 1.通过id获取到元素 click 通过id获取到元素 var btn=document.getElementById(“btn1”); btn.function(){ … } 2. “fun();” click (1)写在初始化函数内: window.function(){ 方法名... -
element el-tree直接行内编辑时阻止冒泡触发node-click事件
2019-07-25 20:22:00这样点击操作按钮的时候和input框获取焦点的时候都不会冒泡了 -
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020-12-28 16:08:28在 v-for 循环语句上,定义一个点击事件 传入两个参数(当行数据、当前事件对象),如下代码片段,当前事件对象必须加上 ‘$’ 符号 (item, key=index click=operate(item,> {{ item.title }} ... -
关于动态生成dom绑定事件失效的原因及解决方法
2020-11-28 17:30:51之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件... -
js基础——操作行内样式和对触发事件的理解
2019-08-04 15:13:40本文是对上一文"js基础"的补充 一、 操作行内样式 1. 上文说到:通过对象.style.属性名js只能操作行内样式。...当该对象的行内样式的属性有值时,由于行内样式的优先级大于内嵌样式,故最终会应用新的值 <... -
Layui前端框架中的Button添加Click事件
2021-02-11 15:14:00button点击事件有一个type属性,默认type是submit,有时候使用默认会出现页面自动刷新问题。 <button class="btn btn-primary" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>... -
Element u中el-select、el-row、el-dropdown-item等等标签添加@click事件无效解决方法
2021-04-12 15:41:31如下: <el-row @click.native="handle"></el-row> //js handle(){ console.log('我生效啦') } ...原因:vue封装@click这些方法时阻止了原生的DOM事件,而native就是释放DOM原生事件。 -
elementUI el-table @row-click 解决行内冲突--忽略指定列区域点击效果
2021-12-22 11:14:03行内按钮点击会冒泡,事件会传递到行,单单在按钮上设置@click.native.stop,效果不佳,而且发现:一个按钮在不满足条件的情况下是禁用的,设置了:disabled属性,所以在禁用状态下,会直接触发行的事件。... -
解决多次触发change或click事件系统卡死问题
2019-04-09 12:05:35最近使用bootstrap table的时候,自己写了个表格行内编辑,其中有2个select选择器A、B,要在每次改变了select选择器A的值时触发另一个select选择器B的onchange事件。过程中使用了$(ele).trigger('change')来触发... -
JS中click和onclick本质区别
2021-01-07 17:10:46click是一个方法,onclick是一个事件。 求同: 告诉浏览器在鼠标点击时候要做什么。 存异: click属于方法,是JS语句直接调用,即显示调用。 onclick是属于事件,事件名前一般都以on开头。必须通过DOM写一个函数且将... -
vue常用事件之v-on:click 以及事件对象,事件冒泡,事件默认行为
2018-01-18 23:05:42其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似。比如:v-on:click/mouseout/mouseover/mousedown....... 以下click为例 注意:所有的v-on都可以简写为@,比如说v-click可以简写为@click 1.监听... -
vue用ant design中table表格,点击某行时触发的事件操作
2021-01-18 17:18:18click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个... -
记录开发路上的小坑:elementui中表格cell-click 与 模板中 插入自己的 checkbox的change事件冲突
2021-11-25 17:16:44这个是可以正常运行的代码,不正常的是把 checkbox外面的span删除,出现的情况是:设置了cell-click 以及 el-checkbox的change方法后,我点击列表的行,ok完成了勾选,我再次点击列表的勾选框,好了,完全没反应!... -
element 中row-click表格单行点击和单元格事件冲突解决方案
2021-06-18 10:09:01如果单行点击和单元格事件发生冲突,如点击编辑会加载整行中展开关闭功能, 可以给按钮的点击事件加修饰符 如:@click.native.stop=“search(scope.row)”,可阻止冒泡事件 重点:.native为必填 -
JS 实现原生防抖函数时遇到的onclick和行内onclick的区别问题
2021-11-27 15:28:52在html的onclick行内添加一个方法,每次触发点击事件都会执行该方法 看似没什么问题,但如果这个方法返回的是一个方法呢,如果...使用addEventListener给dom元素添加click事件,赋值依然为外层方法的执行 <body> -
行内onclick使用遇坑--------作用域与传入字符串
2021-06-25 05:06:57问题一:行内onclick触发的函数放在$(funtion(){})内报错,错误代码如下:$(function(){function say(){alert(123);}})运行之后报错:say is not defined$(function{})的作用类似于window.onload,都是网页加载完成在... -
elementUI中,table表格,点击行内的按钮,触发了行点击事件,防止冒泡的解决方案
2022-02-15 14:33:52添加了点击表格中的行事件,但当我点击行内的按钮执行其他操作时,也会触发点击行事件 解决方案,只需在结构中点击时加.stop阻止冒泡即可 -
vue实现行内编辑
2021-12-20 17:57:04=index"> 编辑span> div> <div class="counle cancel_preservation" v-else> <span class="cancel" @click="buttons(1,i)">取消span> <span class="preservation" @click="buttons(2,i)">保存span> div> div> div> ... -
JS——行内式注册事件
2017-11-21 16:04:00html中行内调用function的时候,是通过window调用的function,所以打印this等于打印window,所以在使用行内注册事件时务必传入参数this <!DOCTYPE html> <html> <head lang="en"> <meta ...