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 ...
随机推荐
- Requests使用
Requests 简介 Requests库 requests是一个很实用的Python HTTP客户端库,编写爬虫和测试服务器响应数据时经常会用到.可以说,**Requests 完全满足如今网络的需求 ...
- 数据结构---Java---String
1.概述 1.1 源码(JDK1.8) public final class String implements java.io.Serializable, Comparable<String& ...
- 【leetcode】945. Minimum Increment to Make Array Unique
题目如下: Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. ...
- MariaDB 创建表
在本章中,我们将学习如何创建表. 在创建表之前,首先确定其名称,字段名称和字段定义. 以下是表创建的一般语法: CREATE TABLE table_name (column_name column_ ...
- 学习java web中的listener
web.xml里的顺序为:context-param->listener->filter->servlet 监听器是需要新建一个类,然后按监听的对象继承:ServletContext ...
- H5页面前后端通信 (3种方式简单介绍)
1.ajax:短连接 2.websocket :长连接,双向的. node搭建的websocket服务器,推送信息给客户端浏览器 :https://www.cnblogs.com/fps2tao/ ...
- kvm无人值守安装centos6
nginx配置 server { listen default_server; server_name _; root /home/iso; # Load configuration files fo ...
- OpenResty 技术图谱skill-map
# OpenResty 技术图谱## basic concepts- HTTP- RESTful API & API GateWay- Microservice- Domain Specifi ...
- QC浏览器登陆自动关闭
服务器(win2003 SP2)上装了个QC10,用了一段时间后突然登陆不上了.可以看见域及Project信息,但是登陆后加载几秒后突然自动关闭.局域网内的其他机器可以登陆. 解决方案:修改数据执行保 ...
- Hive 窗口函数
举例: row_number() over(partition by clue_id order by state_updated desc) 业务举例: select distinct a.clue ...