标签: javascript-events

跨浏览器JavaScript输入实时更改/粘贴检测

是否有跨浏览器方式来检测输入字段的实时更改?

通过现场,我的意思不是当场失去焦点,而不是在下一个按键时,等等.马上或类似的东西.

使用jQuery和组合.change(),.keyup(),.bind('paste')等我能在工作现场变化检测某些浏览器,但不是全部.使用不同的组合将使其在其他浏览器中有所作为.

最棘手的工作是输入字段的鼠标操作 - 选择文本并移动它(基本上是剪切和粘贴),右键单击和粘贴或切割等.出于某种原因,甚至似乎.mousedown()并.mouseup()没有削减它.

我现在能想到的唯一的跨浏览器解决方案是每隔100毫秒检查一次输入字段值,并将该值与存储值进行比较.但是,当基于事件的解决方案如此接近时,这似乎有些过分.

有没有一个jQuery插件可以做到这一点?或者还有其他方法可以实现这一目标吗?

javascript jquery input javascript-events

9
推荐指数
1
解决办法
3512
查看次数

当document.readystate == complete是onload fires时是一样的吗?

在Internet Explorer中,当onreadystatechange被触发并且readystate切换完成时,是否同时onload事件触发?此时是否已完成所有请求?

javascript internet-explorer javascript-events

9
推荐指数
1
解决办法
2万
查看次数

jQuery UI选项卡的事件监听器?

是否有可用于jQuery UI的标签小部件的事件监听器?

我想根据当前活动的选项卡索引更改网页上的背景颜色.这样的事情(伪代码):

$('.tabs').addEventListener(index, changeBackgroundImage);

function changeBackgroundImage(index) {
    switch (index) {
        case 1:
            $('body').css('background-image', '/images/backgrounds/1.jpg');
        break;
        case 2:
            $('body').css('background-image', '/images/backgrounds/2.jpg');
        break;
        case 3:
            $('body').css('background-image', '/images/backgrounds/3.jpg');
        break;
        default:
            $('body').css('background-image', '/images/backgrounds/default.jpg');
        break;
    }
};
Run Code Online (Sandbox Code Playgroud)

提前致谢.

javascript jquery jquery-ui javascript-events jquery-ui-tabs

9
推荐指数
3
解决办法
2万
查看次数

获得所有DOM事件的数组

我创建了一个多用途工厂事件发射器工厂功能.有了它,我可以将对象转换为事件发射器.如果有人想要查看或使用它,事件发射器工厂的代码如下.

我的问题是如何从DOM中获取事件列表.请注意我不是要获取绑定事件列表.我想要一份所有可能的活动清单.我想为发射器添加"管道"方法.此方法将获取DOM对象并绑定到所有可能的事件,然后当任何这些事件触发时,将触发发射器中具有相同名称的事件.

我不认为有办法做到这一点.我准备制作一个硬编码的事件名称数组,但是如果我可以获得更好的DOM数组,那么如果W3C标准化了更多的事件类型,它仍然可以工作.

PS如果你为W3C工作,那就是那种让每个人都讨厌DOM的垃圾.请停止像玩具语言一样对待JavaScript.它不是玩具语言,需要的不仅仅是玩具DOM.

/**
 * Creates a event emitter
 */
function EventEmitter() {
    var api, callbacks;

    //vars
    api = {
        "on": on,
        "trigger": trigger
    };
    callbacks = {};

    //return the api
    return api;

    /**
     * Binds functions to events
     * @param event
     * @param callback
     */
    function on(event, callback) {
        var api;

        if(typeof event !== 'string') { throw new Error('Cannot bind to event emitter. The passed event is not a string.'); }
        if(typeof callback !== 'function') { …
Run Code Online (Sandbox Code Playgroud)

javascript dom event-handling javascript-events

9
推荐指数
2
解决办法
2973
查看次数

为什么必须将事件对象作为参数传递?

我正在学习如何在JavaScript中操作事件,我想知道"为什么在使用事件处理时必须将事件对象作为参数(参数)传递给函数?"

这是我所说的一个例子:

<script type="text/javascript">
    document.getElementById('button_1').onclick = (function (event) {
        alert("The event is: " + "on" + event.type);
    });
</script>
Run Code Online (Sandbox Code Playgroud)

我写了上面的代码,我非常了解它的作用.我只是不明白整个(事件)传递.我认为这是一种为button_1.onclick事件处理程序分配匿名函数的方法.事件处理程序在分配之前是否尝试传入事件或者?...我很难理解这一点.如果有人可以请我澄清一下,我将不胜感激.

[我尝试在Google上搜索,但发现了非常复杂的解释和示例.只有简单到中间的解释才有帮助.] =)

非常感谢你.

javascript events event-handling javascript-events

9
推荐指数
1
解决办法
5145
查看次数

我们应该在分配事件之前检查元素是否存在吗?

我看到很多人在分配事件之前检查是否存在DOM元素,例如(coffeescript):

$ -> 
    if( $("#progressbar").length > 0 ) 
        $("#progressbar").progressbar( value: 0 )
Run Code Online (Sandbox Code Playgroud)

这有必要吗?如果我们只是添加事件,无论元素是否存在,是否有性能损失?

javascript javascript-events coffeescript

9
推荐指数
1
解决办法
5098
查看次数

在我自己的对象中实现事件

我想要的是一个提供一些事件的自定义对象.例如:

var CustomObjectTextChangedEventName = 'textChanged';
var CustomObject = function () {
    var _this = this;
    var _text = "";

    _this.OnTextChanged = document.createEvent("Event");
    _this.OnTextChanged.initEvent(CustomObjectTextChangedEventName, true, false);

    _this.ChangeText = function (newText) {
        _text = newText;
        fireTextChanged();
    };

    function fireTextChanged() {
        _this.dispatchEvent(_this.OnTextChanged);
    }
}
Run Code Online (Sandbox Code Playgroud)

使用该事件的代码如下所示:

myCustomObject = new CustomObject();
myCustomObject.addEventListener(CustomObjectTextChangedEventName, handleTextChanged, false);
Run Code Online (Sandbox Code Playgroud)

正如您所看到的......在JS中使用事件的默认方式.但我不能让它变得烦人......

目前我的问题是我的对象没有实现"addEventListener"和"dispatchEvent".但是这个功能是从"元素"正常实现的......

我可以以某种方式提供它们,还是我必须为自己实现它们?我该如何实施它们?我是否必须实施自己的事件处理?(具有处理程序的内部列表,"添加" - 和"删除" - 处理程序功能,并在我要触发事件时触发每个处理程序)

问候!

javascript javascript-events

9
推荐指数
1
解决办法
5810
查看次数

如何在流星的整个页面上收听点击事件?

我正在试验排行榜示例,当您点击播放器名称时,我想取消设置selected_player.我想这个工作,我需要向body元素添加一个监听器事件,并防止它触发其中的其他元素.然后我将selected_player设置为0.

但是,我似乎只能将事件映射添加到模板?

  Template.player.events({
    'click': function () {
      Session.set("selected_player", this._id);
    }
  });
Run Code Online (Sandbox Code Playgroud)

我错过了什么吗? 如何收听整个页面的"点击"事件?

javascript-events meteor

9
推荐指数
1
解决办法
3400
查看次数

使用JQuery实时利用用户输入的第一个字符

我试图自动大写用户输入的textarea /输入的第一个字符.第一次尝试看起来像这样:

$(document).ready(function() {
 $('input').on('keydown', function() {
    if (this.value[0] != this.value[0].toUpperCase()) {
        // store current positions in variables
        var start = this.selectionStart;
        var end = this.selectionEnd; 
        this.value = this.value[0].toUpperCase() + this.value.substring(1);
        // restore from variables...
        this.setSelectionRange(start, end);
    }
 });
});
Run Code Online (Sandbox Code Playgroud)

这个问题是它显示小写字符,然后纠正它,这是丑陋的(http://jsfiddle.net/9zPTA/2/).我想在keydown而不是keyup上运行我的javascript,并在飞行中转换事件(或拦截它,防止默认,并触发修改后的新事件).

这就是我现在所拥有的,哪些不起作用(http://jsfiddle.net/9zPTA/5/):

$(document).ready(function() {
  $('input').on('keydown', function(event) {
    if (this.selectionStart == 0 && event.keyCode >= 65 && event.keyCode <= 90 && !(event.shiftKey)) {
       event.preventDefault();
       var myEvent = jQuery.Event('keypress');
       myEvent.target = event.target;
       myEvent.shiftKey = true;
       myEvent.keyCode = event.keyCode; …
Run Code Online (Sandbox Code Playgroud)

javascript string jquery javascript-events

9
推荐指数
2
解决办法
2万
查看次数

更改按钮的功能

目前我有一个显示器,我有一个按钮START,点击此按钮,计时器启动,它被2个按钮取代.这两个按钮是提交和走开.在提交每个按钮时,运行一个脚本.点击提交按钮,启动test.php.

一切都很好,但我无法做出很少的改变

第一

我希望结合开始和提交按钮,即

a)点击开始按钮,计时器应该开始,

b)应该出现2个新按钮

c)脚本test.php应该运行.

如果我可以改变开始按钮的文本提交并保持按钮相同并点击开始按钮运行上述3个功能,那将是很好的,但是也欢迎不同的方面

第二

当计时器的时间到达0:00时,它应该重置到其初始阶段,按钮也应该变为其原始状态,即

a)2个按钮应该消失并被开始按钮取代

b)时钟应显示其初始值,即2:00

js代码的一部分.整个代码@fiddle

/*******Code for the three buttons*********/
$(document).ready(function (){
        $("#startClock").click(function (){
                $("#startClock").fadeOut(function(){
$("#walkaway").fadeIn().delay(120000).fadeOut();
$("#submitamt").fadeIn().delay(120000).fadeOut(function(){
        $("#startClock").fadeIn();
        });
    })
});
});

/*******Code for running test.php script*********/
$(document).ready(function(){
$('#submitamt').click(function(){
    var txtbox = $('#txt').val();
    var hiddenTxt = $('#hidden').val();

        $.ajax({
            type:'post',
             url:'test.php',
            data:{txt:txtbox,hidden:hiddenTxt},
            cache:false,
            success: function(returndata){
                $('#proddisplay').html(returndata);
                console.log(returndata)
            }
        });
})
})

/*******Code for starting the clock*********/
$('#startClock').click(function () {
    var counter = 120;
    setInterval(function () {
        counter--;
        if (counter >= 0) { …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery javascript-events

9
推荐指数
1
解决办法
120
查看次数