浅析js绑定事件的常用方法


Posted in Javascript onMay 15, 2016

浅析js绑定事件的常用方法 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS事件绑定</title>
<script type="text/javascript">
/**
 * 绑定事件的方式:用事件属性绑定事件函数
 * 优点:1:完成行为的分离 
 * 2:便于操作当事对象,因为function是作为on***的属性出现的,可直接用this引用当事对象。
 * 3:方便读取事件对象,事件触发时系统自动把事件对象传递给事件函数,已其一个来传
 */	
  window.onload=function(){
  	 var k=document.getElementById('k').onclick=function(event){
	 var jj=document.getElementById('jj');
	   jj.style.top=event.clientX+'px';
		 jj.style.left=event.clientY+'px';
	 }
  } 
  
</script>
<style>
	#k{width:60px;height:80px; background-color:#80ffff;}
	#jj{width:60px ;height:80px;background-color:#ffff00;z-index:1000;position:absolute;}
</style>
</head>
<body>
<div id="k"></div>
<div id="jj"></div>	
</body>
</html>

以上这篇浅析js绑定事件的常用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 #Javascript
js阻止浏览器默认行为的简单实例
May 15 #Javascript
js添加绑定事件的方法
May 15 #Javascript
You might like
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
分享php多功能图片处理类
2016/05/15 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
JS实现多选框的操作
2020/06/24 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
python代码制作configure文件示例
2014/07/28 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python pip配置国内源的方法
2020/02/14 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
应届生法律求职信
2013/10/22 职场文书
教师应聘个人求职信
2013/12/10 职场文书
写给老师的感谢信
2015/01/20 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
python单向链表实例详解
2022/05/25 Python