2018-06-30 js事件
一.js代码加载的时机
1.DOM加载完毕 -> 将js代码放到body体之下即可；
2.网页资源加载完毕-> $(window).onload(function(){ });
3.jQuery实现等DOM加载完毕运行 ->$(function(){ }) 或 $(document).ready(fucntion(){ })
二.事件处理
1.bind() ->事件绑定
$('div').bind('click',function(){
alert(1);
})//给div绑定click事件
2.unbind() ->解除事件绑定
3.one() ->绑定事件，仅一次（运行一次之后就自动解除事件绑定）
三.事件委派
1.live() ->给新生事物增加事件
$('div').live('click',function(){
alert(1);
})//给div委派click事件
2.die() ->解除事件
四.事件切换
1.toggle(fn1,fn2) -> 点击循环执行fn1与fn2
2.hover(fn1,fn2) -> 移入移出循环执行fn1与fn2
五。鼠标拖拽实例
<body>
<div class="div_img">
<img src="../img/1.jpg" alt="">
</div>
</body>
</html>
<script>
//获取被点击对象
obj = $('.div_img');
//鼠标移动时 获取鼠标的位置坐标
$(document).mousemove(function(e){
x = e.clientX;
y = e.clientY;
})
//对象被点击是获取点击位置与其左上角的坐标差ox,oy
obj.mousedown(function(){
ox = $(this).offset().left;
oy = $(this).offset().top;
dx = x - ox;
dy = y - oy;
// 给dom绑定鼠标移动和鼠标弹起事件
$(document).bind('mousemove',move);
$(document).bind('mouseup',stop);
//防止事件冒泡
return false;
})
//鼠标弹起时，解除事件绑定
function stop(){
$(document).unbind('mousemove',move);
$(document).unbind('mouseup',stop);
}
//鼠标点击目标并且移动时，改变目标的位置
function move(e){
sy = e.clientX - dx;
sx = e.clientY - dy;
document.title=sx+","+sy
obj.css({'top':sx+'px','left':sy+'px'})
//防止事件冒泡
return false ;
}
</script>
2018-06-30 js事件的更多相关文章
- 2018.06.30 BZOJ4765: 普通计算姬（dfs序+分块+树状数组）
4765: 普通计算姬 Time Limit: 30 Sec Memory Limit: 256 MB Description "奋战三星期,造台计算机".小G响应号召,花了三小时 ...
- 2018.06.30 BZOJ4443: [Scoi2015]小凸玩矩阵（二分加二分图匹配）
4443: [Scoi2015]小凸玩矩阵 Time Limit: 10 Sec Memory Limit: 128 MB Description 小凸和小方是好朋友,小方给小凸一个N*M(N< ...
- 2018.06.30 BZOJ1857: [Scoi2010]传送带（三分套三分）
1857: [Scoi2010]传送带 Time Limit: 1 Sec Memory Limit: 64 MB Description 在一个2维平面上有两条传送带,每一条传送带可以看成是一条线段 ...
- 2018.06.30 BZOJ1026: [SCOI2009]windy数（数位dp）
1026: [SCOI2009]windy数 Time Limit: 1 Sec Memory Limit: 162 MB Description windy定义了一种windy数.不含前导零且相邻两 ...
- 2018.06.30 BZOJ3083: 遥远的国度（换根树剖）
3083: 遥远的国度 Time Limit: 10 Sec Memory Limit: 512 MB Description 描述 zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国 ...
- 2018.06.30 cdq分治
#cdq分治 ##一种奇妙的分治方法 优点:可以顶替复杂的高级数据结构:常数比较小. 缺点:必须离线操作. CDQ分治的基本思想十分简单.如下: 我们要解决一系列问题,包含修改和查询操作,我们将这些问 ...
- 2018.06.30 BZOJ 3932: [CQOI2015]任务查询系统（主席树）
3932: [CQOI2015]任务查询系统 Time Limit: 20 Sec Memory Limit: 512 MB Description 最近实验室正在为其管理的超级计算机编制一套任务管理 ...
- 2018.06.30 BZOJ 2342: [Shoi2011]双倍回文（manacher）
2342: [Shoi2011]双倍回文 Time Limit: 10 Sec Memory Limit: 128 MB Description Input 输入分为两行,第一行为一个整数,表示字符串 ...
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- 移动终端学习2：触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...
随机推荐
- 从零开始的计算机网络基础（图文并茂，1.8w字，面试复习必备）
前言 在互联网高速发展的今天,我们通过手机,电脑等通讯设备可以很轻松达到未出茅庐便知天下事的境界.每天我们都要访问数不胜数的网站,通过打开浏览器,输入网址两步搞定.当然更为常规的做法是打开浏览器,设置 ...
- 程序选择结构if和switch的定义以及使用方法
什么是if选择结构 if选择结构是根据条件判断之后在做处理 基本的if选择结构的语法 if(条件){//条件为真则执行代码1,否则不执行 //代码块1 } if-else选择结构 为什么使 ...
- orcale 多列转一行显示
强大的数据库有个自带函数wm_concat() wm_concat()这个函数放的是需要汇总的列 select wm_concat(name) name from tablename
- Docker 搭建 ELK 集群步骤
前言 本篇文章主要介绍在两台机器上使用 Docker 搭建 ELK. 正文 环境 CentOS 7.7 系统 Docker version 19.03.8 docker-compose version ...
- 文件读取的时候要留意 -- 序列化serialize()与反序列化unserialize()：
原文:https://blog.csdn.net/little_rabbit_baby/article/details/53840543 序列化serialize()与反序列化unserialize( ...
- myod实验（选做）
myod实验 实验任务 1 复习c文件处理内容 2 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Makefile ...
- Git （一）预设环境和免密登录
背景 一直用的svn,这段时间换了之后才发现git的强大功能.缺点就是可能上手比较难一点. 接下来就带你Git入门 Git是什么? Git是目前世界上最先进的分布式版本控制系统 Git有什么特点?好用 ...
- openlayers3中Overlay用法
Overlay 从名字看,是覆盖图.覆盖物的意思,主要的用途就是在地图之上再覆盖一层,用以显示额外的可见元素,可见元素一般是 HTML 元素,利用 overlay,可以将可见元素放置到地图的任意位置, ...
- C# 对 TCP 客户端的状态封装
TCP客户端连接TCP服务器端有几种应用状态: 与服务器的连接已建立 与服务器的连接已断开 与服务器的连接发生异常 应用程序可按需求合理处理这些逻辑,比如: 连接断开后自动重连 连接断开后选择备用地址 ...
- NetCore项目实战篇03---HTTP Patch 更新数据
一.什么是HTPP Patch HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 ...