DOM0级事件绑定之js的onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<body>
<form action="">
<input type="text" name="username">
<input type="button" id="btn" value="click me" this="32" event="sd">
</form>
</body>
<script>
document.getElementById('btn').onclick = function () {
console.log(Array.prototype.slice.call(arguments)); // [MouseEvent] ie8及以下为空
console.log(this); // 该input对象
console.log(event); // 该点击事件
console.log(this.form); // input所在的表单对象
console.log(this.form.username.value); // 用户名input输入的值
}
</script>
</html>
1、通过此方法绑定的事件,作用域是该元素对象;
2、多次绑定的事件,后面定义的覆盖之前的事件;
3、此方法绑定的事件在事件流中的冒泡过程中触发。
DOM0级事件绑定之js的onclick事件的更多相关文章
- js、jq事件绑定方式总结——以click事件为例
一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...
- jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- js 中onclick 事件 点击后指向自己的对象,查找或者添加属性 用关键字this 传入参数 (可以改变原标签css)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- thymeleaf 传参到js的onclick事件中
html: <img th:onclick="'javascript:imgClick(\''+${card.id}+'\',\''+${card.name}+'\');'" ...
- js 增加 onclick 事件
obj.onclick = function(){check(this)} function check(obj){ alert(obj)l }
- JS中onclick事件传参
美术馆案例中,需要将“增加一个img标签,放入大图片”这样一个函数封装,但是在调用的时候需要传参. <script type="text/javascript"> on ...
- JS Event事件流(冒泡机制、捕获机制、事件绑定)
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- JS基础——事件绑定
上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...
- 关于js中对事件绑定与普通事件的理解
普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id ta ...
随机推荐
- shell函数的存储和显示
- linux 系统磁盘管理体系
目录 linux 系统磁盘管理体系 一.磁盘的基本概念 二.磁盘的内部结构 三.磁盘的外部结构 四.磁盘的接口及类型 五.fdisk磁盘分区实践 六.gdisk 分区 七.parted 高级分区工具. ...
- yum 仓库搭建与源码包安装实战
目录 一.yum 仓库自建示例: 二.源码包安装实践 基础环境 服务端配置 下载及安装fpm软件 客户端: 一.yum 仓库自建示例: 1.安装ftp服务 yum -y install vsftpd ...
- Linux系统分辨率设置
linux 设置分辨率 如果你需要在linux上设置显示屏的分辨率,分两种情况:分辨率模式存在与分辨率模式不存在,具体如下. 1,分辨率模式已存在 1)如何查询是否存在: 图形界面:在System S ...
- C++的命名空间
作用:防止类,函数,变量等之间重名,比如在代码合并的时候 假如两个头文件中均定义了类Cal,而调用程序同时包含了两个头文件,当在定义Cal c时,程序会报类型重定义的错误.这种问题可以通过命名空间来解 ...
- Android 编译笔记20191205
gradle下载很慢 解决问题的方法如下: 使用文件管理器 打开用户主目录 windows平台: c:\Users\用户名\.gradle macos平台: /Users/用户名/.gradle li ...
- springcloud中provider-product依赖
<dependencies> <dependency> <groupId>cn.lijun.springcloud</groupId> <arti ...
- 理解webpack中的process.env.NODE_ENV
参考资料 一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但 ...
- 【Flutter学习】之绘画实例(一)
一,概述 画布(Canvas) 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 Canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像等的方法,结合这些方法我们可以绘制出千变 ...
- Windows Xp Sp3官方简体中文版(原版) 纯净安装版 百度网盘下载
百度网盘下载: 1.链接:https://pan.baidu.com/s/1o-HcKddSG6IAz_0COKhq8Q 提取码:hkhr 2.扫码下载: