js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
一、总结
一句话总结：滚动事件scroll()，浏览器窗口调整监听resize()，思考好监听对象。
1、滚动事件scroll()的监听对象是谁？
window对象
$(window).scroll(function(){
//滚动条的距离scrollTop()和scrollLeft()
$('#div1').text($(this).scrollTop())
})
2、浏览器窗口调整监听resize()的监听对象是谁？
window对象
$(window).resize(function(){
alert('窗口大小改变了')
})
3、如何监听窗口滚动？
scroll函数
$(window).scroll(function(){
//滚动条的距离scrollTop()和scrollLeft()
$('#div1').text($(this).scrollTop())
})
4、如何监听窗口改变？
resize函数
$(window).resize(function(){
alert('窗口大小改变了')
})
二、监听鼠标滚动事件和窗口改变事件怎么写
1、相关知识
- scroll() 当用户滚动滚动条时会发生 scroll 事件
- resize() 当调整浏览器窗口的大小时，发生 resize 事件。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
body{height: 3000px}
div{width: 150px;height: 100px;border:1px solid orange;position: fixed;left:150px;}
p{width: 50px;height:50px;background: green}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<div id="div1"><p></p></div>
<input id="btn1" type="button" value="事件对象">
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
//滚动条的距离scrollTop()和scrollLeft()
$('#div1').text($(this).scrollTop())
})
$(window).resize(function(){
alert('窗口大小改变了')
})
})
</script>
</body>
</html>
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写的更多相关文章
- js监听鼠标滚动
//加载顺序问题,不可改变位置 var scrollFunc = function(e){ e = e || window.event; if (e.wheelDelta) { i ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js与jquery实时监听输入框值变化方法
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- react 监听页面滚动
html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...
- 二、python小功能记录——监听鼠标事件
1.原文链接 #-*- coding:utf-8 -*- from pynput.mouse import Button, Controller ## ======================== ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- 用python的库监听鼠标程序测试,有程序,有现象
程序如下: # -*- coding: utf-8 -*- import pythoncom, pyHook def OnMouseEvent(event): print 'MessageNam ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端用js与jquery实时监听输入框值的改动
背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...
随机推荐
- Oracle 11g win7 64位【桌面类 && 服务器类】安装过程
Oracle 11g win7 64位[桌面类 && 服务器类]安装过程 一.首先,根据自己的操作系统位数(32位或64位),到官网下载相应的安装程序,如下图所示. ...
- Codefroces Educational Round 26 837 C. Two Seals
C. Two Seals time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- centos6.5 数据库的安装
mongo https://www.cnblogs.com/layezi/p/7290082.html
- Gym - 100502A Amanda Lounges
Amanda Lounges Time Limit: 1000MS Memory Limit: 524288KB 64bit IO Format: %I64d & %I64u AMAN ...
- 洛谷 P1553 数字反转（升级版）
P1553 数字反转(升级版) 题目描述 给定一个数,请将该数各个位上数字反转得到一个新数. 这次与NOIp2011普及组第一题不同的是:这个数可以是小数,分数,百分数,整数.整数反转是将所有数位对调 ...
- Impala是什么？
Impala是Cloudera公司主导开发的新型查询系统,它提供SQL语义,能查询存储在Hadoop的HDFS和HBase中的PB级大数据.已有的Hive系统虽然也提供了SQL语义,但由于Hive底层 ...
- 玲珑杯 Round 19 A simple math problem
Time Limit:2s Memory Limit:128MByte Submissions:1599Solved:270 DESCRIPTION You have a sequence anan, ...
- wps如何输入连续的长破折号
最近在写论文, 想输入破折号,结果是— — 这个破折号中间是有缝隙的, 如何变成没有缝隙. 第一步,选中: 第二步,右击选择字体 第三步,放大(只加一个破折号,然后放大到200%) 不知道有没有人,像 ...
- python路径找类并获取静态字段
Python通过路径找类并获取其中大写的静态字段 settings.py class Foo: DEBUG = True TEST = True xx.py import importlib path ...
- 解读OpenRTB(实时竞价)生态系统
最近3年,广告实时竞价(RealTimeBidding)模式逐渐流行起来. 2012年大致了解过,最近一段时间,重新温习下. 半壁江山 生态系统总的来说分为2个部分,卖方和买方. 卖方:媒体,即拥有广 ...