-
javascript如何获取触发事件的对象
2013-12-25 19:56:29由于事件冒泡显现的存在,所以有时候有时候触发事件的对象和注册事件处理函数的对象并不是一个,而在实际应用中往往要获取触发事件的对象,下面就通过实例代码介绍一下如何获取触发事件的对象。 代码实例如下: ...javascript如何获取触发事件的对象:
由于事件冒泡显现的存在,所以有时候有时候触发事件的对象和注册事件处理函数的对象并不是一个,而在实际应用中往往要获取触发事件的对象,下面就通过实例代码介绍一下如何获取触发事件的对象。代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> * { margin:0px; padding:0px; } #box { margin:100px; width:300px; height:300px; background:blue; } ul{list-style:none} ul li { width:150px; height:30px; margin-top:5px; background:green; } </style> <script type="text/javascript"> function myfunction(ev) { var ev=ev?ev:event; var obj=ev.srcElement?ev.srcElement:ev.target; alert(obj.id); } window.οnlοad=function() { var box=document.getElementById("box"); box.οnclick=myfunction; } </script> </head> <body> <div id="box"> <ul> <li id="蚂蚁部落一">蚂蚁部落一</li> <li id="蚂蚁部落二">蚂蚁部落二</li> <li id="蚂蚁部落三">蚂蚁部落</li> </ul> </div> </body> </html>
原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=9780
-
vue.js 重学笔记(7) --如何获取事件对象
2020-10-20 08:43:38获取按钮对象 给按钮实例绑定点击事件 代码展示 html代码 <button id="btn" type="button">按我</button> script代码 var obtn=document.getElementById("btn2"); -- obtn.onclick=function引入
问题:在页面中有一个按钮,当点击按钮的时候,控制台会输出“hello word”
javascript实现流程
- 获取按钮对象
- 给按钮实例绑定点击事件
代码展示
html代码
<button id="btn" type="button">按我</button>
script代码
var obtn=document.getElementById("btn2"); -- obtn.onclick=function(){ console.log("hello"); }
1.vue处理事件流程
使用
v-on
指令监听Dom事件代码展示
html代码
<button type="button" v-on:click="handleClick">click me</button>
代码解析:
v-on
可以帮助我们监听Dom事件,:
跟上对应的Dom事件类型(如click点击,mouseenter鼠标移入等),=
号后面跟上函数或者直接一些javascript代码。在实际开发中,如果把js代码写在等号后面是不太实际的,我们可以使用一个函数变量将这些代码存储起来,而在等号后面,我们则可以写上方法名字。如v-on:click=“handleClick”
2.在methods方法属性中注册相应函数
methods:{ handleClick:function(){ console.log('hello'); } }`
效果图:
2.事件对象
有事件产生的地方就会涉及到事件对象,接下来小结如何获取到事件对象。
2.1方法名后不加括号
<code> v-on:click="handleClick"</code>
methods:{ handleClick:function(e){ console.log(e); } }
代码解析:
如果方法名后不加括号,我们可以在methods 方法属性中的对应的方法函数中加入一个参数即可。控制台输出
MouseEvent {isTrusted: true, screenX: 162, screenY: 153, clientX: 47, clientY: 22, …}
2.2 方法名后加括号
<button type="button" v-on:click="handleClick()">click me</button>
methods:{ handleClick:function(e){ console.log(e); } }
控制台输出:
undefined
方法名后不加指定参数,在方法中是无法获取到事件对象。
解决方法:在方法名括号中输入参数$event;
<button type="button" v-on:click="handleClick($event)">click me</button>
methods:{ handleClick:function(e){ console.log(e); } }
控制台输出:
MouseEvent {isTrusted: true, screenX: 100, screenY: 116, clientX: 57, clientY: 26, …}
2.2 方法名后加括号,括号内多个参数
<button type="button" v-on:click="handleClick('a','b',$event)">click me</button>
methods:{ handleClick:function(d,f,g){ console.log(d); console.log(f); console.log(g); } }
控制台输出:
a
b
MouseEvent {isTrusted: true, screenX: 100, screenY: 116, clientX: 57, clientY: 26, …} -
jquery如何拿到一个对象_使用JQuery获取对象的几种方式
2020-12-22 01:50:151、先讲讲JQuery的概念JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的...1、先讲讲JQuery的概念
JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代码实现一些复杂的JS效果。
2、JQuery实现了 代码的分离
不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了;
如:
$(function(){
$("Element").click{function(){
alert("点击我哦!");
}
}
});
上面的代码中 只要定义了Element 这个元素 后面的click是动作
alert("点击我哦!");这个是要执行的代码,当然你可以有很多的操作在这个函数中;
这里面的$这个号代表JQuery的意思 ,就是引用类库了。。。我是这么理解的;
3、JQuery的核心的一些方法
each(callback) '就像循环
$("Element").length; ‘元素的个数,是个属性
$("Element").size(); ’也是元素的个数,不过带括号是个方法
$("Element").get(); ‘某个元素在页面中的集合,以数组的形式存储
$("Element").get(index); ’功能和上面的相同,index表示第几个元素,数组的下标
$("Element").get().reverse(); ‘把得到的数组方向
$("Element1").index($("Element2")); ’元素2在元素1中的索引值是。。。
4、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)
$("*") ‘表示获取所有对象 但是我至今没这样用过
$("#XXX") ’获得 id=XXX 的元素对象(id可以是标签的id或CSS样式id) 常用
$("input[name='username']") 获得input标签中name='userName'的元素对象 常用
$(".abc") ' 获得样式class的名字是.abc的元素对象 常用
$("div") ' 标签选择器 选择所有的div元素 常用
$("#a,.b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素
$("#a .b p") 'ID号是a的并且使用了 b样式的 所有的p元素
示例:
jquery测试.checkCss{
color:blue;
}
.redioCss{
color:red;
}
$(function(){
// $("#XXX") 获得id=XXX的所有Jquery对象
$("#subt").click(function(){
// $("XXX") 获得XXX标签名的所有Jquery对象
alert("input 标签的对象个数为:"+$("input").length);
// $("XXX[name='YYY']") 获得XXX标签名下name='YYY'的所有Jquery对象
// val()获得属性值
alert("name='userName'的输入框内容为:"+$("input[name='userName']").val());
// 注意获得value值的第二种方式
alert("name='note'的输入框内容为:"+$("input[name='note']").attr("value"));
alert("下拉菜单被选中项的文本为:"+$("#sex option:selected").text());
alert("下拉菜单被选中项的值为:"+$("#sex").val());
alert("复选框选中的个数为:"+$("input[name='check']:checked").length);
if($("input[name='check']:checked").length>0){
var allCheckValue="";
var allCheckText="";
$("input[name='check']:checked").each(function(){
allCheckValue+=$(this).val()+" ";
allCheckText+=$(this).parent(".checkCss").text()+" ";
});
alert("复选框选中的文本为:"+allCheckText+" 值为:"+allCheckValue);
}
if($("input[name='status']:checked").length>0){
alert("单选框选中的文本为:"+$("input[name='status']:checked").parent(".redioCss").text()+" 值为:"+$("input[name='status']:checked").val());
}
});
});
姓名:
性别:
男
女
不男不女
爱好:旅游
音乐
体育
文学
状态:在职
离职
简介:
5、层级元素获取
$("Element1 Element2 Element3 ....") '前面父级 后面是子集
$("div > p") '获取div下面的所有的 p元素
$("div + p") 'div元素后面的第一个 p元素
$("div ~ p") 'div后面的所有的 p元素
6、简单对象获取
$("Element:first") 'HTML页面中某类元素的第一个元素
$("Element:last") 'HTML页面中某类元素的最后一个元素
$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如:$("input:not(:checked)") 表示选择所有没有选中的复选框
$("Element:even") '获得偶数行
$("Element:odd“)'获得奇数行
$("Element:eq(index)") '取得一个给定的索引值
$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素
$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素
。。。
7、内容对象的获取和对象可见性
$("Element:contains(text)") '元素中是否包含text文本内容
$('Element:empty") '获得元素不包含子元素或文本的
$("Element:partnt") '获得元素包含子元素或文本的
$("Element:has(selector)") ‘是否包含某个元素, 如:$("p:has(span)")表示所有包含span元素的p元素
$("Element:hidden") '选择所有可见元素
$("Element:visible") '选择所有不可见元素
8、其他对象获取方法
$("Element[id]") '所有带有ID属性的元素
$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素
$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素
$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素
$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素
$("Element[attribute *= youlika ]" '获得所有某个属性包含youlika的开头的元素
$("Element[selector1][selector2][....]") ’符合属性选择器,比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。
9、子元素的获取
$("Element:nth-child(index)") '选择父级下面的第n个元素
$("Element:nth-child(even)") '选择父级下面的偶数
$("Element:nth-child(odd)") '选择父级下面的奇数
$("Element:nth-child(3n+1)") '表达式
$("Element:first-child") '选择父级下面的第一个子元素
$("Element:last-child") '选择父级下面的最后一个子元素
$("Element:only-child") '匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt
10、表单对象获取
$(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。
$(:text)//匹配所有的单行文本框
$(:password)//匹配所有的密码框
$(:radio)//匹配所有的单选按钮
$(:checkbox)//匹配所有的复选框
$(:submit)//匹配所有的提交按钮
$(:image)//匹配所有的图像域,例如
$(:reset)//匹配所有的重置按钮
$(:button)//匹配所有的按钮
$(:file)//匹配所有的文件上传域
$(:hidden)//匹配所有的不可见元素或者type为hidden的元素
$(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮
$(:disabled)//匹配所有的不可用input元素,作用与上相反
$(:checked)//匹配所有选中的复选框元素
$(:selected)//匹配所有的下拉列表
11、元素属性的设置与移除
$("Element").attr(name) '取得第一个匹配的属性值,比如$("img").attr("src")
$("Element".attr(key,value)") '某一个元素设置属性
$("Element".attr({key:value,key1:value,....})) ‘为某个元素一次性设置多个属性
$("Element").attr(key,function) '为所有匹配的元素设置一个计算的属性值。
$("Element").removeAttr(name)//移除某一个属性
-
react之旅(五)react 事件对象;如何获取input框值;键盘事件;实现双向数据绑定
2020-07-19 00:39:30在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息 实现下面的场景: 点击按钮的时候,将按钮的颜色变为蓝色。 import React from 'react'; class Demo1 extends React....一、事件对象
什么是事件对象:
在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息
实现下面的场景:
点击按钮的时候,将按钮的颜色变为蓝色。import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); } changeColor =(e) => { e.target.style.background = "blue"; } render(){ console.log("render"); return( <div> <button onClick={this.changeColor}>changeColor</button> </div> ) } } export default Demo1;
可以看到,箭头函数的第一个参数传入的就是事件,
e.target
获取的就是当前dom元素的信息。如果想即传入事件,又传入参数的话,可以采用下面方式:import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); } changeColor =(e, param1) => { console.log(param1); e.target.style.background = "blue"; } render(){ console.log("render"); return( <div> <button onClick={(e) => {this.changeColor(e, "param1")}}>changeColor</button> </div> ) } } export default Demo1;
二、获取input框值
2.1 借助
ref
属性获取input框的值import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); } getValue =() => { let dom = this.refs.userName; console.log(dom.value); } render(){ console.log("render"); return( <div> <input ref="userName"/> <button onClick={this.getValue}>getValue</button> </div> ) } } export default Demo1;
报这样的警告
Warning: A string ref, "userName", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead.
是因为开启了严格模式的原因,去掉即可。
2.2 使用
onChange
事件来获取input框值import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); } getValue =(e) => { let dom = e.target; console.log(dom.value); } render(){ console.log("render"); return( <div> <input onChange={this.getValue}/> </div> ) } } export default Demo1;
onChange事件调用的方法中会传入
事件
,e.target
就可以获取到当前的dom元素
,进而获取input框的值。三、键盘事件
和
onClick
,onChange
事件用法一样,键盘事件用onKeyUp
或者onKeyDown
:import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); } onKeyUp =(e) => { let dom = e.target; console.log(dom.value); console.log(e.keyCode) } render(){ console.log("render"); return( <div> <input onKeyUp={this.onKeyUp}/> </div> ) } } export default Demo1;
其中键盘事件有个
keyCode
属性,可以获取键盘码
,enter键
的键盘码是13
四、双向数据绑定
双向数据绑定即
MVVM
,即model改变影响视图
,视图改变影响model
。react并不只是MVVM,它仅仅是MV,model改变影响视图。可以手动实现一下:import React from 'react'; class Demo1 extends React.Component { constructor(props){ super(props); this.state = { name: "" } } onChange =(e) => { let dom = e.target; this.setState({ name: dom.value }) } render(){ console.log("render"); return( <div> <div> {this.state.name} </div> <input value={this.state.name} onChange={this.onChange}/> </div> ) } } export default Demo1;
onChange事件刷新this.state.name的值;而this.state.name的值改变后渲染视图层。
-
jquery如何拿到一个对象_Jquery 获取对象的几种方式(转载)
2021-01-27 02:43:24JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代码实现一些复杂... -
Unity中多个Button使用同一个点击事件时如何获取到本次点击的是哪一个Button
2019-08-19 17:50:01在Unity开发过程中,经常会遇到多个Button使用同一个点击事件的情况,在这种情况下有时我们需要对本次点击的按钮进行一系列操作或者根据本次点击的按钮来执行一些事件。那么首先我们需要做的就是获取到本次点击的... -
jquery如何拿到一个对象_使用JQuery获取对象的几种方式(转)
2020-12-22 01:49:251、先讲讲JQuery的概念JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的... -
C# winform 如何在Panel控件的拖拽DragDrop事件中获取Label对象
2015-05-07 13:07:29在C# winform中,在form窗体中有四个Panel控件(panel1、panel2、panel3、panel4...请问,在Panel控件的DragDrop事件中,如何获取Label控件对象,用来判断拖入Panel控件的是哪个Label控件对象(label1、label2、label3)。 -
vue如何获取点击事件源的方法
2021-01-19 18:02:33整理文档,搜刮出一个vue如何获取点击事件源的方法,稍微整理精简一下做下分享。 <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=utf-8> <title>vue click事件获取当前... -
事件对象
2018-12-15 19:48:18好好学习 ,天天向上。Are you ready?... 如何获取事件对象? 标准: 事件处理函数所接收的第一个参数., IE: 内置的全局对象 window.event, 兼容: evt = evt || window.event; 三. 如何使用事件对象... -
jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值
2019-10-06 04:34:19<input type="text" name="address4" id="address4" onFocus="open1(this);...函数则加一个对象 function open1(ob) { var id=$(ob).attr("id"); alert(id); } 如果是超链接,这样写是无效的,获... -
C#如何打开一个进程,以及获取该进程结束的事件
2008-08-07 16:41:00namespace rooksoft.Demo {public class OpenProcess { //静态变量表示当前程序运行中 static bool Is... public static void Main() { //建立一个进程对象 System.Diagnostics.Process p = new System.Diagnosti -
Delphi中通过CreateObject创建的 COM 对象如何获取事件
2006-12-21 13:36:00转载请注明出处:http://blog.csdn.net/jh_zzz/archive/2006/12/21/1451693.aspx QQ 群中有人提到这个问题,我到网上搜了一下,居然没有找到相关的文章,后来在台湾一个bbs上发现了一个工具,在此以 MS Agent ... -
如何获取input框type=file选中的文件对象(FileReader)
2017-07-31 01:57:17最近突发奇想想做一个现在常用的图像上传然后从中截取头像保存的案例,所以做了一些准备工作,比如input框选择文件触发的哪些事件,这一节就保存一下我们如何获取input的type=file的input框的文件数据。 如果想获取... -
angular 定义对象_angular 对象属性变化,如何对象触发对象change事件
2020-12-21 05:05:25Angular的变化检测可以分组件进行,每一个Component都对应有一个changeDetector,我们可以在Component中通过依赖注入来获取到changeDetector。而我们的多个Component是一个树状结构的组织,由于一个Component对应一... -
JQUERY EASYUI 如何获取TABS的点击对象??
2011-07-05 14:19:58;text/javascript"> $(document).ready(function () { $('#tt').tabs();...我想在第一次 点击TAB1时,触发一个事件,刷新TAB1里面的内容,点击第一次TAB2时,刷新TAB2里面的内容。该如何做? -
JS和事件对象
2021-03-03 08:39:28当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递给响应函数。 这里需要注意三点: 这个实参是在没有定义形参的情况下由浏览器传入; 响应函数被触发几次,浏览器就将一个事件对象传入几次; ... -
JS的事件对象
2019-10-02 05:29:50一、什么是事件对象(黑匣子) (一)事件: ...二、如何获取事件对象 (一)标准浏览器:给事件触发函数传递的第一个参数; (二)IE浏览器:全局对象的属性window.event; (三)兼容:ev... -
100%经典文章:JS如何获取鼠标在一个标签中的坐标
2020-03-20 23:05:10鼠标的坐标系统太重要了。...1. 只有一个标签,没有子标签的情况 这种情况最好说,利用事件对象 event 的 offsetX 和 offsetY 属性可以获取鼠标在该标签中的坐标。 问:为什么要用事件对象? 答:因为鼠... -
如何给循环中的对象添加事件
2014-11-29 23:28:47如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的... -
Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解
2019-10-08 16:14:58一.摘要 本系列文章是为了抽象通用的,跨浏览器的脚本方法. 本篇文章为脚本库添加...实现效果 本次添加的两个函数用于获取事件对象, 事件对象中包含很多的信息,比如鼠标的坐标, 从而实现自己想要的功能. 实例一可以在... -
jQuery 对象和 DOM 原生对象的区别&jQuery中如何绑定事件
2020-12-18 21:40:28jQuery对象是一个类数组,类数组中的元素是DOM对象(可以为空)。 DOM对象—>jQuery对象:(用$()来包裹) <div id="test"></div> var dom = document.getElementById("test"); -
JavaScript的闭包特性 如何给循环中的对象添加事件
2016-08-26 17:45:49深入理解JavaScript的闭包特性如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的... -
JavaScript进阶笔记——事件、事件监听注册删除事件、事件对象、事件委托、鼠标事件
2020-08-03 09:57:10事件处理程序,通过一个函数赋值的方式完成 利用DOM可以操作如下表单元素的属性: type,value,checked,selected,disabled 表单里面的值(文字)是通过value来修改的 想要禁用按钮要用disabled 样式... -
深入理解JavaScript的闭包特性 如何给循环中的对象添加事件
2012-03-15 10:07:05JavaScript的闭包特性如何给循环中的对象添加事件初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者...