浅析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 相关文章推荐
Jquery倒计时源码分享
May 16 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JS监听Esc 键触发事键
Apr 14 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 获取可变函数参数的函数
2009/08/26 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
node 使用 async 控制并发的方法
2018/05/07 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
python如何提升爬虫效率
2020/09/27 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
青年文明号创建承诺
2014/03/31 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
导游词之上海豫园
2019/10/24 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python