事件基础

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        function getPosition(ev) {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
        }
        window.onload = function () {
            document.onmousemove = function (ev) {
                var arrDiv = document.getElementsByTagName("div");
                var oEvent = ev || event;
                var pos = getPosition(oEvent);
                for (var i = arrDiv.length - 1; i > 0; i--) {
                    arrDiv[i].style.left = arrDiv[i - 1].offsetLeft + "px";
                    arrDiv[i].style.top = arrDiv[i - 1].offsetTop + "px";
                }
                arrDiv[0].style.left = pos.x + "px";
                arrDiv[0].style.top = pos.y + "px";
            }
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

  

时间: 2024-10-10 20:51:14

事件基础的相关文章

JQuery_事件基础

JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发.jQuery 为开发者更有效率的编写事件行为, 封装了大量有益的事件方法供我们使用. 一.事件绑定 jQuery 通过.bind()方法来为元素绑定这些事件. 可以传递三个参数: bind(type, [data], fn),type 表示一个或多个类型的事件名字符串:[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串.一个

Javascripts事件基础和事件绑定

javascript事件基础和事件绑定一.事件驱动    1.事件    javascript侦测到的用户的操作或是页面的一些行为    2.事件源    引发事件的元素(发生在谁身上)    3.事件处理的程序    对事件处理的程序或是函数(发生什么事)二.事件分类    1.鼠标事件    onclick 鼠标单机时触发此事件:    ondblclick 鼠标双击时触发此事件:    onmousedown 按下鼠标时触发此事件:    onmouseup 鼠标按下后松开鼠标时触发此事件

js学习总结----移动端事件基础及常用的事件库

一.事件基础 PC:click.mouseover.mouseout.mouseenter.mouseleave.mousemove.mousedown.mouseup.mousewheel.keydown.keyup.load.scroll.blur.focus.change... 移动端:click(单击).load.scroll.blur.focus.change.input(代替keyup.keydown)...TOUCH事件模型(处理单手指操作).GESTURE事件模型(处理多手指操作

事件基础(二)键盘的事件

onclick=onmouseup+onmousedown onkeypress=onkeydown+onkeyup keyCod(键值,键盘上每个键都对应一个唯一的值) offset offsetWidth,offsetLeft,offsetHeight ……代表的是实际的值 获取键盘的值需要用到事件对象event,火狐下用ev 键盘控制div的移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

DOM0,DOM2,DOM3事件,事件基础知识入门

事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM1的信息啊,); DOM0就是直接通过 onclick写在html里面的事件, 比如: <input onclick="alert(1)" /> DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定; DOM3是一些

jQuery 语法-选择器-事件(基础知识)

jQuery 语法 jQuery 语法是通过选取 HTML 元素的,并对元素执行某些操作 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() -

vue 事件基础

v-on 缩写:@ v-on:click="handle($event)"     $event可以获取到该dom的基础信息           https://cn.vuejs.org/v2/api/#v-on 其他的 HTML 事件属性写法与之类似 http://www.w3school.com.cn/tags/html_ref_eventattributes.asp onafterprint script 文档打印之后运行的脚本. onbeforeprint script 文档打

javaScirpt事件详解-原生事件基础(一)

# 事件 > JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能响应相关的操作.**图片引用:UI Events** # 事件流 主要是当时的IE团队提出的事件流逝是事件冒泡流,而Netscape提出的是事件捕获流, 可以使用DOM2级定义的*addEventListener()*方法来处理在冒泡或者捕获阶段调用事件处理程序. ## 事件冒泡 即事件开始时由最具体的元素(文档中嵌套最深的节点)接收,然后逐级

Java事件基础

package cn.Douzi.Event; import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Demo_moreListener extends JFrame { Mypanel mp = null; public Demo_moreListener() { // TODO Auto-generated constructor stub mp = new Mypanel(); this

Event 事件 - 基础

事件驱动三要素 事件源:即触发事件的元素 事件:被JavaScript检测到的行为.例如: 鼠标点击 键盘按键 选输入框 事件处理函数:事件发生时要进行的操作,又叫做"事件句柄"或"事件监听器" 事件分类: 鼠标事件:    click 鼠标点击操作 dblclick   鼠标双击操作 mousedown    按下鼠标按键 mousemove 鼠标指针在元素上方移动 mouseover     鼠标指针进入元素 mouseout·  鼠标指针移出元素 键盘事件: